다른 요소 다음에 처음 발생하는 요소 선택

113

페이지에 다음 HTML 코드가 있습니다.

<h4>Some text</h4>
<p>
Some more text!
</p>

내 요소 .css에 스타일을 지정하는 다음 선택기가 있습니다 h4. 위의 HTML 코드는 전체 코드의 일부일뿐입니다. div섀도우 박스에 속하는 몇 가지 가 더 둘러싸여 있습니다.

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

따라서 h4요소에 대한 올바른 스타일이 있지만 pHTML 에서 태그 스타일도 지정하고 싶습니다 .

CSS 선택기로 가능합니까? 그렇다면 어떻게해야합니까?

html css css-selectors

— Rob
소스

200

#many .more.selectors h4 + p { ... }

이를 인접 형제 선택 자라고 합니다.

— Phrogz
소스

1

대안은 JS를 사용하여 h4요소 를 찾고 다음 형제로 이동하여 CSS 클래스를 추가하는 것입니다. jQuery를 사용하면 간단하게$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz 2011 년

2

이것은 첫 번째 요소 다음의 요소에서만 즉시 작동합니다. 두 번째 다음 html 요소를 가지려면 다음과 같이 연결할 수 있습니다. #selector .original + h4 + p .original 요소 다음에 h4 다음에 p를 가져 오려면 #selector .original + h4 + p. 매우

— 유용함

30

리터럴 예제의 경우 인접한 선택기 (+)를 사용하고 싶습니다.

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

그러나 연속 된 모든 단락을 선택하려면 일반 형제 선택기 (~)를 사용해야합니다.

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

불행히도 IE 7 이상에서는 버그가있는 것으로 알려져 있습니다 .

— 조엘 멜론
소스

16

내 자신이 이런 종류의 문제를 해결하려고 할 때 이것을 누르십시오.

나는 p가 아닌 다른 요소가 된 후 요소를 다루는 선택기를 수행했습니다.

.here .is.the #selector h4 + * {...}

이것이 그것을 찾는 사람에게 도움이되기를 바랍니다. :)

— 톰
소스

9

을 사용하면 *제목에 설명 된 모든 요소와 일치합니다. 나에게 유용한 알림이었습니다.

— James EJ

1

이것은 질문에 맞는 유일한 대답입니다. 다른 답변은 선행 요소의 유형에 대한 사전 지식이 필요합니다.

— Hugo Wijdeveld

0

초보자를위한 Simplyfing :

다른 요소 바로 다음에 요소를 선택하려면 +선택기 를 사용합니다 .

예를 들면 :

div + p은 "+"요소 모두 선택 <p>직후에 배치 된 소자 <div>요소

선택기에 대해 자세히 알아 보려면이 표를 사용하세요.

— Trooller
소스

0

최신 CSS를 사용하고 "+"가 작동하지 않아서

: 첫 아이

— VNicholson
소스