더하기 부호 ( +)는 다음 형제를위한 것입니다.
이전 형제에 해당하는 것이 있습니까?
답변
아니요, “이전 형제”선택기가 없습니다.
관련 참고 사항 ~은 일반적인 후계자 형제 (요소 가이 요소 뒤에 오는 것을 의미하지만 반드시 직후는 아닙니다)를위한 것이며 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에 중점을 두지 만 동일한 개념이 Grid에도 적용됩니다.
flexbox를 사용하면 이전 형제 선택기를 시뮬레이션 할 수 있습니다.
특히 flex 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; }
-
flex
order속성을 사용하여 시각적 디스플레이에서 형제 순서를 복원합니다.li:last-child { order: -1; }
… 그리고! 이전 형제 선택자가 생성되었습니다 (또는 적어도 시뮬레이션).
전체 코드는 다음과 같습니다.
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 사양에서 :
Flex 항목은 기본적으로 소스 문서에 나타나는 순서대로 표시되고 배치됩니다.
order속성은이 순서를 변경할 수 있습니다.이
order속성은 플렉스 항목을 순서 그룹에 할당하여 플렉스 컨테이너 내에 표시되는 순서를 제어합니다.<integer>flex 값이 속하는 서수 그룹을 지정 하는 단일 값을 갖습니다.
order모든 플렉스 아이템 의 초기 값은 0입니다.
orderCSS 그리드 레이아웃 사양 도 참조하십시오 .
flex 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에서 이전 형제 선택기가 불가능하다는 것입니다 .
이 믿음이 널리 퍼져 있다고 말하는 것은 과소 평가 일 것이다. 다음은 스택 오버플로에만 관련된 질문에 대한 샘플입니다.
- 선택기를 사용하여 CSS에서 요소의 이전 형제를 선택하십시오.
- CSS : 이전 형제 선택
- CSS는 이전 형제를 선택합니다
- CSS의 이전 인접 선택기
- 호버에서 이전 형제 선택
- 선행 형제를 얻는 CSS 선택기
- CSS를 사용하여 호버에서 형제 요소의 색상 변경
- 셀레늄 CSS 구문을 사용하여 이전 형제를 선택하는 방법
- 다른 요소보다 먼저 나오는 요소를 선택하기위한 CSS 선택기?
- CSS 만 사용하여 활성 입력의 이전 형제에 스타일을 추가하는 방법
- 다음 및 이전 요소를위한 CSS 선택기
- div를 가리킬 때 다른 요소에 영향을 미치는 방법
위에서 설명한 것처럼이 믿음은 전적으로 사실이 아닙니다. flex order속성을 사용하여 CSS에서 이전 형제 선택기를 시뮬레이션 할 수 있습니다 .
z-index신화
또 다른 오랜 믿음은 z-index위치 지정된 요소에서만 작동 한다는 것입니다 .
사실, 최신 버전의 사양 인 W3C Editor ‘s Draft 는 여전히 이것이 사실이라고 주장합니다.
z-index
- 값 : 자동 | | 상속
- 초기 : 자동
- 적용 대상 : 위치 지정된 요소
- 상속 : 아니오
- 백분율 : N / A
- 미디어 : 시각
- 계산 된 값 : 지정된대로
(강조 추가)
그러나 실제로이 정보는 더 이상 사용되지 않으며 부정확합니다.
플렉스 아이템 또는 그리드 아이템 인 요소 position는 is 인 경우에도 스태킹 컨텍스트를 생성 할 수 있습니다 static.
Flex 항목은 순서가 수정 된 문서 순서가 원시 문서 순서 대신 사용되며 is 인 경우에도 스택 컨텍스트를 작성하는
z-index것 이외의 값을 제외하고는 인라인 블록과 정확히 동일하게 페인트합니다 .autopositionstatic그리드 항목의 페인팅 순서는 인라인 블록과 정확히 동일합니다. 단, 순서 수정 문서 순서는 원시 문서 순서 대신 사용되며 is 인 경우에도 스택 컨텍스트를 만드는
z-index것 이외의 값 입니다 .autopositionstatic
z-index위치가 지정되지 않은 플렉스 항목에 대한 작업 데모는 다음과 같습니다 . https://jsfiddle.net/m0wddwxs/
답변
나는 같은 질문을했지만 “duh”순간을 가졌다. 쓰는 대신
x ~ y쓰다
y ~ x분명히 이것은 “y”대신 “x”와 일치하지만 “일치합니까?” 질문과 간단한 DOM 순회는 자바 스크립트에서 반복하는 것보다 올바른 요소로보다 효율적으로 이동할 수 있습니다.
원래 질문은 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>답변
+다음 형제 자매입니다. 이전 형제에 해당하는 것이 있습니까?
당신은이 사용할 수있는 도끼 선택기 : !및?
기존 CSS 에는 2 개의 후속 형제 선택기 가 있습니다.
+는 IS 즉각적인 후속 형제 선택기~는 IS 어떤 후속 형제 선택기
기존 CSS 에는 이전 형제 선택기 가 없습니다 .
그러나 ax CSS 포스트 프로세서 라이브러리에는 2 개의 이전 형제 선택기가 있습니다 .
?는 IS 즉시 이전 형제 선택기 (의 반대+)!는 IS 모든 이전 형제 선택기 (반대~)
작업 예 :
아래 예에서 :
.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>