CSS 부모 선택기가 있습니까?
을 어떻게 합니까?<li>앵커 요소의 직접적인 부모 요소는 무엇입니까?
예를 들어, 내 CSS는 다음과 같습니다.
li < a.active {
property: value;
}
JavaScript로 이를 수행하는 방법이 분명히 있지만 CSS Level 2에 고유한 해결 방법이 있기를 바랍니다.
메뉴가 나와 를 CMS로 수 .<li>▁which 작성 하지 않는 한)(메뉴 작성 모듈의 주제를 지정하지 않는 한)
현재 모든 브라우저에서 작동하는 방식으로 CSS에서 요소의 부모를 선택할 수 있는 방법은 없습니다.
Selectors Level 4 Working Draft에는 다음이 포함됩니다.:has()이 기능을 제공하는 유사 클래스입니다.jQuery 구현과 유사하지만 현재 Firefox에서 지원되지 않습니다.
li:has(> a.active) { /* styles to apply to the li tag */ }
파이어폭스는 현재 기본적으로 지원하지 않는 유일한 주요 브라우저입니다.
그 동안 완전한 크로스 브라우저 지원이 있는 상위 요소를 선택해야 할 경우 Firefox에서 JavaScript에 의존해야 합니다.
CSS 유사 클래스를 사용할 수 있습니다.
그러나 브라우저 지원이 제한되어 있습니다(현재 Firefox에서 지원되지 않음).
CSS에서만 부모를 선택할 수는 없을 것 같습니다.
하지만 당신이 이미 가지고 있는 것처럼 보이는 것처럼..activeclass,그를 스래클를, 그스클더쉽이수동있것다입니을할로 옮기는 것이 더 입니다.li((으)로 표시됨a그렇게 하면 둘 다 액세스할 수 있습니다.li 리고그고.aCSS를 통해서만.
*! > input[type=text] { background: #000; }
텍스트 입력의 상위 항목을 선택합니다.하지만 잠깐만요, 아직도 더 많아요.원하는 경우 지정된 상위 항목을 선택할 수 있습니다.
.input-wrap! > input[type=text] { background: #000; }
또는 활성 상태일 때 선택합니다.
.input-wrap! > input[type=text]:focus { background: #000; }
다음 HTML을 확인하십시오.
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
은 그것을 할 수 .span.help input활성 상태이며 다음을 표시합니다.
.input-wrap! .help > input[type=text]:focus { display: block; }
더 많은 기능이 있습니다. 플러그인 설명서를 확인하십시오.
그나저나, 인터넷 익스플로러에서 작동합니다.
몇몇 다른 사람들이 언급했듯이, CSS만을 사용하여 요소의 부모/s를 스타일화하는 방법은 없지만 다음은 jQuery와 함께 작동합니다.
$("a.active").parents('li').css("property", "value");
상위 선택기는 없습니다. 이전 형제 선택기가 없는 것과 같습니다.이러한 선택기가 없는 한 가지 좋은 이유는 브라우저가 클래스를 적용할지 여부를 결정하기 위해 요소의 모든 하위 항목을 통과해야 하기 때문입니다.예를 들어, 다음을 작성한 경우:
body:contains-selector(a.active) { background: red; }
을 구문 분석할 .</body>페이지가 빨간색이어야 하는지 여부를 결정합니다.
요소 사유요:focus-within하위 항목에 포커스가 있는 경우 상위 항목을 선택할 수 있습니다.
요소에 다음이 있는 경우 초점을 맞출 수 있습니다.tabindex기여하다.
예
.parent:focus-within {
background: hsl(199deg, 65%, 73%);
}
/* demo styles */
body {
margin: 0;
}
.parent {
background: hsl(0, 0%, 80%);
min-height: 100vh;
display: grid;
place-content: center;
}
.child {
background: hsl(0, 0%, 0%);
color: white;
padding: 3rem;
outline: 0;
cursor: pointer;
font: 18px/1.25 sans-serif;
width: 20ch;
}<div class="parent">
<div class="child" tabindex="1">
Click or Focus on me, my parent will change.
</div>
</div>에서는 이를 수행할 . CSS 2에서는 CSS 2를 사용합니다.를 를스에추수있다니에 할 수 .li 를 하십시오.a:
li.active > a {
property: value;
}
전환 시도ablock원하는 스타일을 표시합니다. 그a는 요가다채웁다니을음소▁the▁fill를 채울 입니다.li요소를 사용하면 원하는 대로 모양을 수정할 수 있습니다.설정하는 것을 잊지 마십시오.li0인치 로 채우기
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
CSS 선택기 "일반 형제 조합자"는 당신이 원하는 것에 사용될 수 있습니다.
E ~ F {
property: value;
}
은 임의의 임와일다니와 합니다.F가 앞에 E원소의
제가 알기로는 CSS 2에는 없습니다.CSS 3은 더 강력한 선택기를 가지고 있지만 모든 브라우저에서 일관되게 구현되지는 않습니다.개선된 선택기를 사용하더라도 사용자가 예제에서 지정한 것과 정확히 일치하지 않을 것이라고 생각합니다.
이는 셀렉터 레벨 4 사양에서 가장 많이 논의된 측면입니다.이렇게 하면 선택기가 지정된 선택기(!) 뒤에 느낌표를 사용하여 요소를 자식에 따라 스타일을 지정할 수 있습니다.
예:
body! a:hover{
background: red;
}
사용자가 앵커 위를 맴도는 경우 빨간색 배경색을 설정합니다.
하지만 우리는 브라우저의 구현을 기다려야 합니다 :(
하이퍼링크를 상위 항목으로 사용한 다음 호버에서 내부 요소를 변경할 수 있습니다.다음과 같이:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
이렇게 하면 상위 요소의 롤오버를 기준으로 여러 내부 태그의 스타일을 변경할 수 있습니다.
OP가 CSS 솔루션을 찾고 있었다는 것은 알지만 jQuery를 사용하면 쉽게 달성할 수 있습니다.저 같은 경우에는, 저는 그것을 찾아야 했습니다.<ul>의 부모 <span>아이에 포함된 태그<li>는 jQuery입니다.:has선택기를 사용하면 포함된 자식으로 부모를 식별할 수 있습니다.
$("ul:has(#someId)")
합니다.ulID가 someId인 자식 요소를 가진 요소입니다.또는 원래 질문에 답하려면 다음과 같은 작업이 수행되어야 합니다(테스트되지 않음).
$("li:has(.active)")
다음을 이용한 해킹입니다.pointer-events와 함께hover:
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>2022년 CSS 셀렉터 4 업데이트
4는 CSS 셀렉터 4 사서는 CSS 에▁css▁▁in▁라고 불리는 새로운 선택기를 합니다.:has()마침내 부모를 선택할 수 있게 해줍니다.즉, 특정 자식이 있는 CSS 요소를 대상으로 할 수 있습니다.이 기능은 이미 Safari에서 지원되며 Chrome 105에서도 지원됩니다.전체 지원 테이블이 여기에 표시됩니다.
상위 선택기 작동 중
CSS에서, 만약 우리가 무언가를 선택하고 싶다면, 우리는 DOM을 내려가는 선택기를 사용합니다.
예를 들어, div 태그 내에서 p 태그를 선택하면 다음과 같습니다.
div p {
color: red;
}
지금까지, 정말로 선택할 수 없었습니다.div가 있는 p하지만, 그들 안에 있는 태그, 그리고 이것은 우리가 의지해야 한다는 것을 의미했습니다.Javascript이것이 CSS에서 구현되지 않은 주된 이유는 그것이 하기에는 상당히 비싼 작업이기 때문입니다. CSS는 비교적 빨리 구문 분석할 수 있지만 부모 태그를 선택하는 것은 상대적으로 훨씬 더 많은 양의 처리를 필요로 합니다.
:has 이기선, 수선있다습니할을 선택할 수 .div 있는 p어린이 또는 선택기의 일반적인 조합.
를 들어, ": "를 합니다.div와 p다음과 같이 표시됩니다.
div:has(p) {
color: red;
}
이것은 무엇이든 될 것입니다.div와 p색의
상위 선택 항목을 다른 선택 항목과 결합
다른 CSS 셀렉터와 마찬가지로 특정 상황에 맞게 이를 결합할 수 있습니다.를 들어, 만약 이 오직 "만"을 , "만"을 해야 합니다.div 직적인이 span자식:
div:has(> span) {
color: red;
}
로.:has제안합니다. 부모 선택에만 국한되지 않습니다.
예를 들어, 아래에서 우리는 다음을 선택할 수 있습니다.span 쪽인가요?:hasdiv:
span:has(+ div) {
color: red;
}
또는 :not() 선택기를 사용하여 자식이 없는 요소를 선택할 수도 마찬가지입니다.
예를 들어, 다음은 p 자식이 없는 div를 선택합니다.
div:not(:has(p)) {
color: red;
}
CSS에서 텍스트만 포함하는 요소 선택
CSS에서 한가지 매우 흔한 문제는:empty태그는 텍스트를 포함하는 요소를 선택하지 않으므로 때때로 요소가 하나의 공백을 포함할 수 있습니다.:empty적용되지 않습니다. 그:hasSelector를 사용하면 텍스트 노드만 포함하고 다른 하위 요소는 포함하지 않는 요소를 선택할 수 있습니다.
비록 이것이 단순히 완벽한 해결책은 아니지만,:empty공백이 있는 요소(추가 HTML DOM 요소 없이 텍스트만 있는 요소를 선택할 수 있으므로) - 이전에는 불가능했던 텍스트 노드만 있는 DOM 요소를 선택할 수 있습니다.다음 코드를 사용하면 이를 달성할 수 있습니다.
div:not(:has(*)) {
background: green;
}
현재 상위 선택자는 없으며 W3C의 어떤 회담에서도 논의되지 않고 있습니다.CSS가 브라우저에 의해 어떻게 평가되는지 이해해야 실제로 필요한지 이해할 수 있습니다.
여기에는 많은 기술적인 설명이 있습니다.
조나단 스누크는 CSS가 어떻게 평가되는지 설명합니다.
Chris Coyier가 학부모 선택자에 대해 이야기합니다.
해리 로버츠는 효율적인 CSS 선택기를 다시 작성합니다.
하지만 니콜 설리번은 긍정적인 경향에 대한 흥미로운 사실들을 가지고 있습니다.
이 사람들은 모두 프런트 엔드 개발 분야에서 최고 수준입니다.
웹사이트를 설계할 때 정말 도움이 될 수 있는 비표준 기능을 포함하도록 CSS를 확장하는 플러그인이 있습니다.그것은 EQCSS라고 불립니다.
EQCSS가 추가하는 것 중 하나는 부모 선택기입니다.Internet Explorer 8 이상의 모든 브라우저에서 작동합니다.형식은 다음과 같습니다.
@element 'a.active' {
$parent {
background: red;
}
}
요소에 .a.active안에 은 그고그쿼안스대해는서에, .$parent말이 되네요, 기준점이 있으니까요. 수 왜냐하면 부모님과 입니다. 왜냐하면 부모는parentNode자바스크립트로.
다음은 Internet Explorer 8(인터넷 익스플로러 8)에서 사용할 수 있는 데모 및 테스트할 Internet Explorer 8(인터넷 익스플로러 8)이 없는 경우의 스크린샷입니다.
EQCSS에는 메타 셀렉터도 포함됩니다.$prev선택한 요소 앞에 있는 요소의 경우 및$this요소 조회와 일치하는 요소만 해당됩니다.
수평 메뉴에 대한 아이디어입니다.
HTML의 일부
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
CSS의 일부
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
텍스트 입력과 함께 사용하는 다른 예 - 상위 필드 집합 선택
이제 2019년인데, CSS 네스팅 모듈의 최신 초안에는 실제로 이런 것이 있습니다.소개하는@nest회항 중인
3.2. 네스팅 앳 룰: @nest
직접 둥지를 틀면 보기 좋지만, 다소 부서지기 쉽습니다..foo &와 같은 일부 유효한 중첩 선택기는 허용되지 않으며 특정 방식으로 선택기를 편집하면 규칙이 예기치 않게 무효화될 수 있습니다.또한, 어떤 사람들은 둥지를 주변의 선언과 시각적으로 구별하는 것이 어렵다고 생각합니다.
이러한 모든 문제를 해결하기 위해 이 사양은 스타일 규칙을 유효하게 중첩하는 방법에 대한 제한을 적게 부과하는 @nest 규칙을 정의합니다.구문은 다음과 같습니다.
@nest = @nest <selector> { <declaration-list> }@nest 규칙은 스타일 규칙과 동일하게 작동합니다. 스타일 규칙은 선택기로 시작하며 선택기가 일치하는 요소에 적용되는 선언을 포함합니다.유일한 차이점은 @nest 규칙에 사용되는 선택기가 nest를 포함해야 한다는 것입니다. 즉, 선택기가 nest를 포함하고 있다는 것입니다.모든 개별 복합 선택기에 중첩이 포함된 경우 선택기 목록에 중첩이 포함됩니다.
(위 URL에서 복사하여 붙여넣기).
이 규격에 따른 유효한 선택기의 예:
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/
CSS 부모 선택기(:has() 선택기라고도 함)가 마침내 Safari TP 137에 착륙했습니다.이 기능은 현재 Chrome에서도 구현되고 있습니다. (MDN Documentation)
클래스 ▁the▁pseudo다를 통해 이루어집니다.:has()를 들어, .를들면예,div:has(> .child)합니다.<div>가 아가있요소들는이▁a▁with를 가진 요소들.child학생들
다른 예:
요소의 직접 상위 항목 선택
<div>
<p>Child Element</p>
</div>
div:has(> p)
요소의 모든 부모 선택
<div id="grandparent">
<div id="parent">
<div id="child"></div>
<div>
</div>
다음 선택기는 두 가지를 모두 선택합니다.grandparent그리고.parent
div:has(.child)
중첩된 선택기 및 다른 유사 클래스에도 사용할 수 있습니다.
div:has(> :nth-child(10))
다른 유효한 CSS 연산자를 사용하여 쿼리를 사용자 지정할 수 있습니다.
caniuse.com/css-has 에서 브라우저 호환성을 확인하십시오.
W3C는 브라우저에 엄청난 성능 영향을 미치기 때문에 이러한 선택기를 제외했습니다.
기술적으로 이것을 하는 직접적인 방법은 방법이 없습니다.그러나 jQuery 또는 JavaScript를 사용하여 이 문제를 해결할 수 있습니다.
하지만, 여러분은 이것과 같은 것도 할 수 있습니다.
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
jQuery를 사용하여 이 작업을 수행하려면 여기에 jQuery 상위 선택기에 대한 참조가 있습니다.
간단한 대답은 아니오입니다; 우리는 없습니다.parent selectorCSS의 이 단계에서 요소나 클래스를 교환할 필요가 없다면 두 번째 옵션은 JavaScript를 사용하는 것입니다.이와 같은 것:
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});
또는 응용 프로그램에서 jQuery를 사용하는 경우 더 짧은 방법:
$('a.active').parents('li').css('color', 'red'); // Your property: value;
현재 표준 CSS에는 부모 셀렉터가 없지만, 저는 도끼(즉, 도끼)라는 (개인적인) 프로젝트를 진행하고 있습니다.증강 CSS 선택기 구문 / ACSSS). 7개의 새로운 선택기 중 다음 두 가지를 모두 포함합니다.
- 친부모 선택자
<((으)로 할 수>) - 임의의 조상 선택자
^((으)로 할 수[SPACE])
도끼는 현재 비교적 초기 베타 개발 단계에 있습니다.
데모 보기:
.parent {
float: left;
width: 180px;
height: 180px;
margin-right: 12px;
background-color: rgb(191, 191, 191);
}
.child {
width: 90px;
height: 90px;
margin: 45px;
padding-top: 12px;
font-family: sans-serif;
text-align: center;
font-size: 12px;
background-color: rgb(255, 255, 0);
}
.child.using-axe < .parent {
background-color: rgb(255, 0, 0);
}<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child using-axe">Here, the axe parent selector turns the outer square red.</div>
</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>의 <직접 부모 선택기입니다.
.child.using-axe < .parent
평균:
직계
.child.using-axe은 어느것이것입니다..parent
또는 다음을 사용할 수 있습니다.
.child.using-axe < div
그 말은 다음을 의미합니다.
직계
.child.using-axe은 즉, 즉입니다.div
아이디어 있어요?
CSS4는 뒤로 걷는 것에 약간의 훅을 추가한다면 멋질 것입니다.그때까지 (권장하지는 않지만) 사용할 수 있습니다.checkbox 및/는radio 일반적인 연결 방식을 깨고 CSS가 정상 범위 밖에서 작동할 수 있도록 하는 input것입니다.
/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0); /* Old Microsoft opacity */
}
/* Base style for content and style menu */
.main__content {
background-color: lightgray;
color: black;
}
.menu__hidden {
background-color: black;
color: lightgray;
/* Make list look not so _listy_ */
list-style: none;
padding-left: 5px;
}
.menu__option {
box-sizing: content-box;
display: block;
position: static;
z-index: auto;
}
/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
content: '\2630';
display: inline-block;
}
*/
/* ▼ - Down Arrow */
.menu__trigger__selection::after {
content: "\25BC";
display: inline-block;
transform: rotate(90deg);
}
/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
cursor: pointer;
background-color: darkgray;
color: white;
}
/**
* Things to do when checkboxes/radios are checked
*/
.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
transform: rotate(0deg);
}
/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100); /* Microsoft!? */
}
/**
* Hacky CSS only changes based off non-inline checkboxes
* ... AKA the stuff you cannot unsee after this...
*/
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
background-color: lightgray;
color: black;
}
.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
color: darkorange;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
background-color: black;
color: lightgray;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
color: darkorange;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
background-color: darkgreen;
color: red;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
color: darkorange;
}<!--
This bit works, but will one day cause troubles,
but truth is you can stick checkbox/radio inputs
just about anywhere and then call them by id with
a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-default">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-one">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-two">
<div class="main__content">
<p class="paragraph__split">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<input type="checkbox"
class="menu__checkbox__selection"
id="trigger-style-menu">
<label for="trigger-style-menu"
class="menu__trigger__selection"> Theme</label>
<ul class="menu__hidden">
<li class="menu__option">
<label for="style-default"
class="menu__trigger__style">Default Style</label>
</li>
<li class="menu__option">
<label for="style-one"
class="menu__trigger__style">First Alternative Style</label>
</li>
<li class="menu__option">
<label for="style-two"
class="menu__trigger__style">Second Alternative Style</label>
</li>
</ul>
<p class="paragraph__split">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>꽤 징그럽지만, CSS와 HTML만 있으면 그것을 제외한 모든 것을 만지고 다시 만지는 것이 가능합니다.body그리고.:root링크를 통해 거의 모든 곳에서.id그리고.for의특의 radio/checkbox input모래땅label 방아쇠를 당깁니다. 언젠가 누군가가 그것들을 다시 만지는 방법을 보여줄 것입니다.
한 가지 더 주의할 점은 오직 한 가지만 input 정의의id수도 . 먼저 용할수있음, 먼저사checkbox/radio 전환된 상태, 즉...그러나 여러 레이블이 모두 동일한 것을 가리킬 수 있습니다.inputHTML과 CSS 둘 다 더 징그럽게 보일 수도 있지만요.
CSS Level 2의 기본적인 해결책이 있기를 바랍니다.
다른 사이비 수업은 잘 모르겠지만, 저는:checked CSS 3 같은 요. 전이기맞면다, 그비것니다습이었한슷이것은내억▁if.[checked]위의 수 를 들어, 드코에서찾수있이유다니입위는을다위▁which,니▁in입. 예를 들어,
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
/* rules: and-stuff; */
}
하만그것런때들에문지때▁like와 같은 은.::after그리고.:hover나는 그것들이 어떤 CSS 버전에 처음 나타났는지 전혀 확신할 수 없습니다.
이 모든 것을 말씀드리지만, 화가 나더라도 절대로 이것을 생산에 사용하지 마십시오.농담으로, 또는 다른 말로, 어떤 일이 이루어질 수 있다고 해서 항상 그렇게 되어야 한다는 것을 의미하는 것은 아닙니다.
아니요, CSS에서만 부모를 선택할 수 없습니다.
하지만 당신이 이미 가지고 있는 것처럼 보이는 것처럼..activeclass,그를 스래클를, 그스클더쉽이수동있것다입니을할로 옮기는 것이 더 입니다.li((으)로 표시됨a그렇게 하면 둘 다 액세스할 수 있습니다.li 리고그고.aCSS를 통해서만.
적어도 CSS 3까지는 그렇게 선택할 수 없습니다.하지만 요즘 자바스크립트에서는 꽤 쉽게 할 수 있습니다. 바닐라 자바스크립트를 조금만 추가하면 됩니다. 코드가 꽤 짧다는 것을 알 수 있습니다.
cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
//console.log(el.nodeName)
if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
console.log(el)
};
});<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>해보세요...
이 솔루션은 Javascript가 없는 일반 CSS2 규칙을 사용하며 이전 브라우저와 새 브라우저 모두에서 작동합니다.클릭하면 하위 항목anchor가▁its를 합니다.active유사 클래스 이벤트그런 다음 단순히 몸을 숨기고, 허용합니다.active부모에게 거품이 일게 하는 이벤트li태그는 자신의 스타일을 바꾸고 새로운 스타일로 자신의 앵커 아이를 다시 드러냅니다.자식이 부모에게 스타일을 지정했습니다.
예제 사용:
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
이제 이 을 제이이적용니다합을스와 함께 .active에대 사유 수업한의 유사 .a의 li링크를 클릭할 때 태그:
a.link {
display: inline-block;
color: white;
background-color: green;
text-decoration: none;
padding: 5px;
}
li.listitem {
display: inline-block;
margin: 0;
padding: 0;
background-color: transparent;
}
/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */
a.link:active {
display: none;
}
.listitem:active {
background-color: blue;
}
.listitem:active a.link {
display: inline-block;
background-color: transparent;
}
녹색 배경이 있는 링크가 클릭하면 목록 항목의 파란색 배경으로 변경됩니다.
에 의지하여.
클릭하면
▁an▁we▁happen▁changing▁when▁have▁currently다▁element▁based▁can있▁only▁parent니습▁element▁on▁child수자식발생할경우에가 있을 때만 가능합니다.<input>요소가 상위 요소 내부에 있습니다.입력에 포커스가 걸리면 CSS를 사용하여 해당 상위 요소에 영향을 줄 수 있습니다.
는 다음예제사이데도됩니다움이해는하을용법는됩다▁using를 사용하는 것을 하는 데 될입니다.:focus-withinCSS »
.outer-div {
width: 400px;
height: 400px;
padding: 50px;
float: left
}
.outer-div:focus-within {
background: red;
}
.inner-div {
width: 200px;
height: 200px;
float: left;
background: yellow;
padding: 50px;
}<div class="outer-div">
<div class="inner-div">
I want to change outer-div(Background color) class based on inner-div. Is it possible?
<input type="text" placeholder="Name" />
</div>
</div>언급URL : https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector
'programing' 카테고리의 다른 글
| MongoDB 집계:고유 필드 카운트 (0) | 2023.05.29 |
|---|---|
| 번들에서 'Main'이라는 이름의 스토리보드를 찾을 수 없습니다. (0) | 2023.05.29 |
| UI 내비게이션 컨트롤러에서 "뒤로" 버튼을 숨기는 방법은 무엇입니까? (0) | 2023.05.29 |
| 파일 시스템이 아닌 데이터베이스에 파일을 저장하시겠습니까? (0) | 2023.05.29 |
| 터미널에서 bash 스크립트를 실행하려면 어떻게 해야 합니까? (0) | 2023.05.29 |