Nice programing

하나의 태그에 대한 선택기 바로 뒤에 다른 태그

nicepro 2020. 10. 10. 11:01
반응형

하나의 태그에 대한 선택기 바로 뒤에 다른 태그


<B>태그 바로 앞에 오는 모든 태그를 선택 <A>합니다.

A+B {
    /* styling */
}

모든 선택기 무엇 <A>직접 태그 다음 에 의해 <B>태그는?

내 질문에 맞는 샘플 HTML은 다음과 같습니다.

<a>some text</a>
<b>some text</b>

CSS에서는 할 수 없습니다.

편집 : 좀 더 도움이되도록 jQuery (JavaScript 라이브러리)를 사용하는 경우 .prev().


내부에 직접 B 요소가 있거나 뒤에 B 요소가 있다는 점을 감안할 때 A 스타일을 지정 하시겠습니까? 이렇게 :

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

CSS에서는 (아직) 그런 일을 할 수 없습니다. Eric Meyer는 이러한 종류의 선택자가 CSS 메일 링리스트에서 꽤 많이 논의되었으며 실행 불가능하다고 말합니다. 핵심 WebKit 개발자 중 한 명인 Dave Hyatt는 이것이 불가능한 이유에 대한 좋은 설명과 함께 논평합니다.

확인 : Shaun Inman의 블로그 게시물Eric Meyer댓글 .
David Hyatt 도.


반대로 만 수행 할 수 있습니다. 이렇게하면 태그 바로 앞에 오는 모든 태그가 선택됩니다.

이것은 논리적으로 귀하의 요청과 동일합니다.

라벨이있는 여러 체크 박스 행의 스타일을 지정하는 데 자주 사용합니다.

CSS :

label+input {
    margin-left: 4px;
}

DOM :

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

당신은 할 수 있지만 지원은 여전히 ​​버그가 있습니다. 그 이름은 인접한 형제 선택자입니다.

http://reference.sitepoint.com/css/adjacentsiblingselector

참고 URL : https://stackoverflow.com/questions/1132366/selector-for-one-tag-directly-followed-by-another-tag

반응형