콤마 - css 형제 선택자




CSS 상위 셀렉터가 있습니까? (18)

앵커 요소의 직접적인 부모 인 <li> 요소는 어떻게 선택합니까?

예를 들어 내 CSS는 다음과 같습니다.

li < a.active {
    property: value;
}

분명히 JavaScript로이 작업을 수행 할 수있는 방법이 있지만 CSS Level 2에 기본으로 존재하는 일종의 해결 방법이 있기를 희망합니다.

내가 스타일을 꾸미려고하는 메뉴는 CMS에 의해 분출되고 있으므로 <li> 요소로 이동하지 못합니다 (테마가 아닌 메뉴 작성 모듈이 아니라면).

어떤 아이디어?


CSS 선택기 " General Sibling Combinator "는 여러분이 원하는대로 사용할 수 있습니다 :

E ~ F {
    property: value;
}

이는 E 요소가 선행 된 F 요소와 일치합니다.


CSS를 확장하여 웹 사이트를 디자인 할 때 실제로 도움이 될 수있는 비표준 기능을 포함하는 플러그인이 있습니다. 이를 EQCSS 라고 합니다 .

EQCSS가 추가하는 것 중 하나는 상위 선택기입니다. IE8 이상의 모든 브라우저에서 작동합니다. 다음은 형식입니다.

@element 'a.active' {
  $parent {
    background: red;
  }
}

그래서 우리는 모든 요소 a.active 에 대해 요소 쿼리를 열었습니다. 그리고 그 쿼리 내부의 스타일에 대해서는 $parent 와 같은 것들이 참조 포인트가 있기 때문에 의미가 있습니다. 브라우저는 JavaScript에서 parentNode 와 매우 유사하기 때문에 부모를 찾을 수 있습니다.

다음 은 IE8 에서 작동하는 $parent$parent 데모의 데모 와 함께 테스트 할 수있는 IE8이없는 경우의 스크린 샷입니다 .

EQCSS에는 선택된 요소 $prev 의 요소에 대한 meta-selectors $prev , 요소 조회와 일치하는 요소에 대한 $this 됩니다.


OP가 CSS 솔루션을 찾고 있지만 jQuery를 사용하여 손쉽게 달성 할 수 있다는 것을 알고 있습니다. 필자는 자식 <li> 포함 된 <span> 태그에 대한 <ul> 상위 태그를 찾아야했습니다. jQuery에는 :has 선택자가 있기 때문에 포함 된 자식에 의해 부모를 식별 할 수 있습니다.

$("ul:has(#someId)")

someId라는 id를 가진 자식 요소가있는 ul 요소를 선택합니다. 또는 원래 질문에 답하기 위해 다음과 같은 방법이 트릭을 수행해야합니다 (테스트되지 않음).

$("li:has(.active)")

SASS의 앰퍼샌드로 가능합니다 :

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS 출력 :

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

css2에서이 작업을 수행 할 방법이 없습니다. 당신은 li에 클래스를 추가하고 a를 참조 할 수 있습니다.

li.active > a {
    property: value;
}

기술적으로 직접적인 방법은 없지만 jquery 또는 javascript를 사용하여 정렬 할 수 있습니다.

Howeve, r 당신도 이것과 비슷한 것을 할 수 있습니다.

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value"); 

이것을 jQuery를 사용하여 여기에서 얻으려면 jQuery 부모 선택기에 대한 참조가 필요하다.


내가 아는 한 CSS 2에는 없습니다. CSS 3은 강력한 선택기를 가지고 있지만 모든 브라우저에서 일관되게 구현되지는 않습니다. 개선 된 선택기를 사용하더라도 사용자의 예제에서 지정한 내용을 정확히 수행 할 것이라고는 생각하지 않습니다.


누군가가 이렇게 제안 했나요? 수평 메뉴에 대한 아이디어 ...

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%; }

업데이트 된 데모 및 나머지 코드

텍스트 입력과 함께 사용하는 또 다른 예제 - 부모 필드 세트 선택


다음은 hover pointer-events 를 사용하는 해킹입니다.

<!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>


부모 선택자가 없습니다. 이전 형제 선택 도구가없는 것뿐입니다. 클래스가 적용되어야하는지 여부를 결정하기 위해 브라우저가 요소의 모든 하위 요소를 통과해야하기 때문에 이러한 선택기를 사용하지 않는 한 가지 이유가 있습니다. 예를 들어 다음과 같이 썼다면 :

body:contains-selector(a.active) { background: red; }

그런 다음 브라우저는 페이지가 적색인지 아닌지를 결정할 때까지 </body> 가로드 될 때까지 기다린 다음 모든 것을 파싱해야합니다.

이 기사에서는 부모 선택자가없는 이유에 대해 자세히 설명합니다.


아니 당신은 CSS에서만 부모를 선택할 수 없습니다.

그러나 이미 .active 클래스가있는 것처럼 보이기 때문에 클래스를 li 대신 옮기는 것이 쉬울까요? 그렇게하면 lia 를 통해 css에만 액세스 할 수 있습니다.



의사 요소 :focus-within 은 하위 항목에 포커스가있는 경우 부모를 선택할 수있게합니다.

요소에 tabindex 특성이 있으면 포커스를받을 수 있습니다.

초점 내 브라우저 지원

Tabindex

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>


script 를 사용할 수 있습니다.

*! > 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>

input 이 활성 span.help 때 해당 span.help 를 선택할 수 있습니다.

.input-wrap! .help > input[type=text]:focus { display: block; }

더 많은 기능이 있습니다. 그냥 플러그인의 문서를 확인하십시오.

BTW, 그것은 IE에서 작동합니다.


적어도 CSS3까지는 그렇게 선택할 수 없습니다. 하지만 요즘 JS에서 꽤 쉽게 할 수 있습니다. 바닐라 자바 ​​스크립트를 약간 추가해야합니다. 코드가 매우 짧습니다.

      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>


짧은 대답은 NO 입니다. CSS의이 단계에서는 parent selector 자가 없지만 요소 나 클래스를 바꾸지 않아도되는 경우 두 번째 옵션은 다음과 같은 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;

현재 부모 선택자가 없으므로 W3C의 모든 논의에서 논의되고 있지 않습니다. 브라우저가 CSS를 평가하여 실제로 필요한지 여부를 이해하는 방법을 이해해야합니다.

기술적 인 설명이 많이 있습니다.

Jonathan Snook은 CSS 평가 방법을 설명합니다 .

Chris Coyier가 학부모 선별 자 회담에 참석했습니다 .

Harry Roberts는 효율적인 CSS 선택기를 다시 작성했습니다 .

그러나 Nicole Sullivan은 긍정적 인 경향에 대해 흥미로운 사실들을 가지고 있습니다 .

이 사람들은 프론트 엔드 개발 분야에서 모두 최고 수준입니다.


현재 표준 CSS에는 상위 셀렉터가 없지만 ax (즉, Augmented CSS Selector Syntax / ACSSSS )라는 7 개의 새로운 선택기 중에서 다음 두 가지를 모두 포함하는 (개인) 프로젝트를 진행하고 있습니다.

  1. 직계 부모 선택자 < (반대 선택을 가능하게합니다 > )
  2. 조상의 선택자 ^ (반대의 선택을 가능하게하는 [SPACE] )

도끼 는 현재 비교적 초기 베타 개발 단계에 있습니다.

데모보기 :

http://rounin.co.uk/projects/axe/axe2.html

(표준 셀렉터로 스타일 된 왼쪽의 두리스트와 도끼 선택기로 스타일 된 오른쪽의 두리스트를 비교하십시오)





css-selectors