[css] 한 태그에 대한 선택기 바로 뒤에 다른 태그

Program / 글쓴이

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

답변

그렇지 않은 매우 편리합니다하지만, 요즘 당신이 당신의 요소의 순서를 반대로하여이 동작을 달성 할 수 모두 당신이 HTML과 CSS 규칙을 적용하여를 생성 할 때 display: flex와flex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

스 니펫 확장

또한 2 개 이상의 인라인 요소 float: right가있는 경우 역순으로 표시 되므로을 적용하여 얻을 수 있습니다.

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

스 니펫 확장

답변