"이전 형제"CSS 선택기가 있습니까?

https://stackoverflow.com/questions/1817792

08-07-2019
|

문제

플러스 부호 (+)는 다음 형제를위한 것입니다. 이전 형제와 동등한 것이 있습니까?

해결책

아니요, "이전 형제"선택기는 없습니다.

관련 메모에서 ~ 일반 형제 자매를위한 것입니다 (요소는이 요소가 이후에 나오지만 반드시 바로 다음은 아닙니다)이며 CSS3 선택기입니다. + 다음 형제 자매이며 CSS2.1입니다.

보다 인접한 형제 조합 ~에서 선택기 레벨 3 그리고 5.7 인접한 형제 셀렉터 ~에서 계단식 스타일 시트 레벨 2 개정 1 (CSS 2.1) 사양.

다른 팁

나는 이전의 모든 형제 자매를 스타일링하는 방법을 찾았습니다 (반대 ~) 필요한 것에 따라 작동 할 수 있습니다.

링크 목록이 있고 링크 목록이 있고 하나의 링크를 호버링 할 때 이전의 모든 것이 빨간색으로 바뀌어야한다고 가정 해 봅시다. 당신은 다음과 같이 할 수 있습니다 :

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

선택기 레벨 4가 소개됩니다 :has() (이전에 주제 지표 !) 이전 형제를 선택할 수 있습니다.

previous:has(+ next) {}

… 그러나 글을 쓰는 시점에서는 브라우저 지원을 위해 출혈 가장자리를 넘어 약간의 거리입니다.

고려하다 `order` 플렉스 및 그리드 레이아웃의 속성.

아래 예제에서 Flexbox에 중점을 둘이지만 그리드에는 동일한 개념이 적용됩니다.

Flexbox를 사용하면 이전 형제 자매 선택기를 시뮬레이션 할 수 있습니다.

특히, 플렉스 order 속성은 화면 주위의 요소를 움직일 수 있습니다.

예는 다음과 같습니다.

요소 B가 호버링 될 때 요소 A가 빨간색으로 바뀌기를 원합니다.
<ul>
    <li>A</li>
    <li>B</li>
</ul>

단계

만들기 ul 플렉스 컨테이너.
```
ul { display: flex; }
```

마크 업에서 형제 자매의 순서를 뒤집습니다.
```
<ul>
   <li>B</li>
   <li>A</li>
</ul>
```

형제 자매를 사용하여 요소 A를 대상으로합니다.~ 또는 + 할 것입니다).
```
li:hover + li { background-color: red; }
```

플렉스를 사용하십시오 order 시각적 디스플레이에서 형제 자매의 순서를 복원하는 속성.
```
li:last-child { order: -1; }
```

... 그리고 voilà! 이전 형제 자매 선택기가 탄생했습니다 (또는 적어도 시뮬레이션).

전체 코드는 다음과 같습니다.

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

Flexbox 사양에서 :

5.4. 디스플레이 순서 : the order 재산

플렉스 항목은 기본적으로 소스 문서에 나타나는 것과 동일한 순서로 표시되고 배치됩니다. 그만큼 order 속성을 사용 하여이 순서를 변경할 수 있습니다.

그만큼 order 속성은 Flex 품목이 Flex 컨테이너 내에 나타나는 순서를 서수 그룹에 할당하여 제어합니다. 싱글이 필요합니다 <integer> 플렉스 항목이 속한 서수 그룹을 지정하는 값.

처음의 order 모든 플렉스 품목의 값은 0입니다.

또한 참조하십시오 order CSS 그리드 레이아웃 사양에서.

플렉스로 만든 "이전 형제 셀렉터"의 예 order 재산.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsfiddle

부수적 노트 - CSS에 대한 두 가지 구식 신념

Flexbox는 CSS에 대한 오랜 신념을 산산조각 내고 있습니다.

그러한 믿음 중 하나는 그 것입니다 CSS에서는 이전 형제 선택기가 불가능합니다.

이 믿음이 널리 퍼져 있다고 말하는 것은 과소 평가 일 것입니다. 다음은 스택 오버플로에서 관련 질문의 샘플링입니다.

위에서 설명한 바와 같이,이 믿음은 완전히 사실이 아닙니다. 이전 형제 자매 선택기는 Flex를 사용하여 CSS에서 시뮬레이션 할 수 있습니다. order 재산.

그만큼 z-index 신화

또 다른 오랜 믿음은 바로 그랬습니다 z-index 위치가있는 요소에서만 작동합니다.

실제로, 가장 최신 버전의 사양 - W3C 편집기 초안 - 여전히 이것이 사실이라고 주장합니다.

9.9.1 스택 레벨 지정 : the z-index재산

z-index

가치 : 자동 | | 상속

이니셜 : 자동

적용 : 배치 요소

상속 : 아니요

백분율 : N/A.

미디어 : 시각적

계산 된 값 : 지정된대로

_{(강조 추가)}

그러나 실제로이 정보는 쓸모없고 부정확합니다.

요소 플렉스 아이템 또는 그리드 항목 언제라도 스태킹 컨텍스트를 생성 할 수 있습니다 position ~이다 static.

4.3. 플렉스 아이템 z- 주문

플렉스 항목은 주문 수정 문서 순서가 원시 문서 순서 대신 사용되는 것을 제외하고는 인라인 블록과 정확히 동일하게 페인트합니다. z-index 다른 값 auto 스태킹 컨텍스트를 만듭니다 position ~이다 static.

5.4. z 축 순서 : the z-index 재산

그리드 항목의 페인팅 순서는 주문 수정 문서 순서가 원시 문서 순서 대신 사용되는 것을 제외하고는 인라인 블록과 정확히 동일합니다. z-index 다른 값 auto 스태킹 컨텍스트를 만듭니다 position ~이다 static.

다음은 시연입니다 z-index 가게되지 않은 플렉스 아이템 작업 : https://jsfiddle.net/m0wddwxs/

나는 같은 질문을했지만 "Duh"순간을 가졌다. 글쓰기 대신

x ~ y

쓰다

y ~ x

분명히 이것은 "y"대신 "x"와 일치하지만 "일치가 있습니까?"라고 대답합니다. 질문, 간단한 DOM Traversal은 JavaScript에서 루핑하는 것보다 올바른 요소로 더 효율적일 수 있습니다.

원래 질문은 CSS 질문이라는 것을 알고 있으므로이 답변은 아마도 완전히 관련이 없지만 다른 JavaScript 사용자는 내가 한 것처럼 검색을 통해 질문에 걸려 넘어 질 수 있습니다.

둘 트릭. 기본적으로 HTML에서 원하는 요소의 HTML 순서를 반전시키고 사용
~ 다음 형제 자매 운영자:

`float-right` + HTML 요소의 순서를 역전 시키십시오

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
}

<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

부모님 `direction: rtl;` + 내부 요소의 순서를 반대합니다

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

+ 다음 형제를위한 것입니다. 이전 형제와 동등한 것이 있습니까?

둘을 사용할 수 있습니다 도끼 선택기 : `!` 그리고 `?`

거기 있습니다 2 후속 형제 셀렉터 기존 CSS에서 :

+ 입니다 즉각적인 후속 형제 선택기
~ 입니다 어느 후속 형제 선택기

기존의 CSS에는 있습니다 이전 형제 자매 선택기는 없습니다.

그러나, 도끼 CSS 후 프로세서 라이브러리가 있습니다 2 이전 형제 선택기:

? 입니다 즉각적인 이전 형제 자매 선택기 (반대 +)
! 입니다 어느 이전 형제 자매 선택기 (반대 ~)

Working Example:

아래 예에서 :

.any-subsequent:hover ~ div 후속을 선택합니다 div
.immediate-subsequent:hover + div 즉시 후속을 선택합니다 div
.any-previous:hover ! div 이전을 선택합니다 div
.immediate-previous:hover ? div 즉각적인 이전을 선택합니다 div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

또 다른 Flexbox 솔루션

HTML에서 요소의 순서를 반대로 사용할 수 있습니다. 그런 다음 사용하는 것 외에 order 에서와 같이 Michael_B의 대답 당신이 사용할 수있는 flex-direction: row-reverse; 또는 flex-direction: column-reverse; 레이아웃에 따라.

작업 샘플 :

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

현재 그렇게 할 수있는 공식적인 방법은 없지만 약간의 트릭을 사용하여이를 달성 할 수 있습니다! 실험적이고 약간의 제한이 있음을 기억하십시오 ... (확인 이 링크 네비게이터 호환성에 대해 걱정하는 경우)

당신이 할 수있는 일은 CSS3 선택기를 사용하는 것입니다 : 의사 클래스가 nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

제한

다음 요소의 클래스를 기반으로 이전 요소를 선택할 수 없습니다.
의사 클래스와 동일합니다

정확한 위치를 알고 있다면 :nth-child()-모든 형제 자매의 기반 배제는 효과가 있습니다.

ul li:not(:nth-child(n+3))

모든 것을 선택합니다 li세 번째 이전 (예 : 1st 및 2nd). 그러나 내 생각에 이것은 추악 해 보이고 매우 빡빡한 usecase가 있습니다.

또한 Nth-Child Orgent-left를 선택할 수도 있습니다.

ul li:nth-child(-n+2)

동일합니다.

불행히도 "이전"형제 자매 선택기는 없지만 혹시 포지셔닝을 사용하여 여전히 동일한 효과를 얻습니다 (예 : 오른쪽 플로트). 그것은 당신이하려는 일에 달려 있습니다.

제 경우에는 주로 CSS 5 성급 등급 시스템을 원했습니다. 이전 별의 색상 (또는 아이콘을 교환해야합니다)이 필요합니다. 각 요소를 올바르게 떠나게함으로써, 나는 본질적으로 동일한 효과를 얻고 있습니다 (별의 HTML은 '거꾸로'작성되어야합니다).

이 예에서는 Fontawesome을 사용하고 있으며 FA-Star-O와 FA-Star의 유니 코드를 바꾸고 있습니다.http://fortawesome.github.io/font-awome/

CSS :

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML : (40)

jsfiddle : http://jsfiddle.net/andrewleyva/88j0105g/

정확한 목표에 따라, 부모 선택기를 사용하지 않고 (존재하는 경우에도)를 사용하지 않고 부모 선택기의 유용성을 달성 할 수있는 방법이 있습니다.

우리에게 :

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

양말 블록 (양말 색상 포함)을 간격을 사용하여 시각적으로 눈에 띄게 만들기 위해 무엇을 할 수 있습니까?

좋은 것은 존재하지만 존재하지 않는 것 :

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

존재하는 것 :

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

이로 인해 모든 앵커 링크는 상단에 15px 마진을 갖도록 설정하고 LIS 내부에 UL 요소 (또는 다른 태그)가없는 사람들의 경우 0으로 다시 재설정됩니다.

나는 비슷한 문제가 있었고이 성격의 모든 문제가 다음과 같이 해결 될 수 있음을 알았습니다.

모든 항목을 스타일로 제공하십시오.
선택한 항목에 스타일을 제공하십시오.
다음 항목을 + 또는 ~로 사용하여 스타일을 제공하십시오.

그리고 이렇게하면 현재, 이전 항목 (모든 항목은 현재 및 다음 항목으로 무효화) 및 다음 항목을 스타일링 할 수 있습니다.

예시:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

그것이 누군가를 돕기를 바랍니다.

아니요. CSS를 통해 불가능합니다. "캐스케이드"를 마음에 가져갑니다 ;-).

그러나 추가 할 수있는 경우 자바 스크립트 당신의 페이지에 약간의 jQuery 최종 목표에 도달 할 수 있습니다.
jQuery를 사용할 수 있습니다 find 대상 요소/클래스/ID에서 "룩 아웃"을 수행하려면 뒤로 트랙하여 대상을 선택하십시오.
그런 다음 jQuery를 사용하여 요소의 DOM (CSS)을 다시 작성합니다.

기반 Mike Brant 의이 답변다음 jQuery 스 니펫이 도움이 될 수 있습니다.

$('p + ul').prev('p')

이것은 먼저 모든 것을 선택합니다 <ul>즉시 따르는 s <p>.
그런 다음 "백 트랙"을 선택합니다. <p>그 세트에서 s <ul>에스.

효과적으로, "이전 형제"는 jQuery를 통해 선택되었습니다.
이제 사용하십시오 .css 해당 요소의 CSS 새 값을 전달할 수 있습니다.

제 경우에는 ID로 div를 선택할 방법을 찾고있었습니다. #full-width, 그러나 그것이 ( .companies.

아래에 모든 HTML을 제어했습니다 .companies, 그러나 그 위의 HTML을 변경할 수는 없습니다.
그리고 캐스케이드는 단지 1 방향으로 만 간다 : 다운.

따라서 나는 모두를 선택할 수있었습니다 #full-width에스.
아니면 선택할 수 있습니다 .companies 그것은 단지 a #full-width.
그러나 나는 할 수있다 ~ 아니다 만 선택하십시오 #full-width그게 진행되었습니다 .companies.

그리고 다시, 나는 추가 할 수 없었습니다 .companies HTML에서 더 높아집니다. HTML의 일부는 외부로 작성되었으며 코드를 포장했습니다.

그러나 jQuery와 함께 i ~할 수 있다 필요한 것을 선택하십시오 #full-widthS, 적절한 스타일을 할당합니다.

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

이것은 모두를 찾습니다 #full-width .companies, 그리고 그것들 만 선택합니다 .companies, CSS의 표준에서 특정 요소를 표적으로하는 데 선택기를 사용하는 방법과 유사합니다.
그런 다음 사용합니다 .parents "백 트랙"을 위해 모든 부모를 선택하십시오 .companies,
그러나 해당 결과를 필터링합니다 #fill-width 결국 요소, 결국
a 만 선택합니다 #full-width 요소가있는 경우 요소 .companies 클래스 후손.
마지막으로 새로운 CSS를 할당합니다.width) 결과 요소에 대한 값.

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

jQuery 참조 문서 :
$() 또는 jQuery (): dom 요소.
.찾기: 선택기, jQuery 객체 또는 요소에 의해 필터링 된 현재 일치하는 요소 세트에서 각 요소의 후손을 가져옵니다.
.부모님: 일치하는 요소 세트에서 각 요소의 바로 앞의 형제를 가져옵니다. 선택기가 제공되는 경우, 해당 선택기와 일치하는 경우에만 이전 형제를 검색합니다 (결과가 나열된 요소/선택기 만 포함하도록 필터링).
.CSS: 일치하는 요소 세트에 대해 하나 이상의 CSS 속성을 설정합니다.

이전 형제 TR을 선택할 수있는 해결책이 필요했습니다. React 및 Styled Components를 사용 하여이 솔루션을 생각해 냈습니다. 이것은 내 정확한 솔루션이 아닙니다 (이것은 기억, 몇 시간 후에). SethighlighterRow 함수에 결함이 있다는 것을 알고 있습니다.

OnMouseOver 행은 행 색상을 상태로 설정하고 새로운 배경색으로 이전 행을 다시 렌더링합니다.

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow

"이전 형제"CSS 선택기가 있습니까?

고려하다 order 플렉스 및 그리드 레이아웃의 속성.