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

itgroup 2023. 6. 2. 20:23

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

선택기+하기 위한 것입니다.는 다음 인접한 형제자매를 선택하기 위한 것입니다.

이전 형제자매와 동등한 것이 있습니까?

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

관련해서 말씀드리자면,~는 일반적인 후계 형제자매(요소가 이 형제자매 뒤에 오는 것을 의미하지만, 반드시 직후에 오는 것은 아님)를 위한 것이며 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가 제안합니다(이전의 주제 지표)!언젠가는 다음과 같은 이전 형제를 선택할 수 있습니다.

previous:has(+ next) {}

또는 (인접 형제자매가 아닌 일반적인 이전 형제자매의 경우):

previous:has(~ next) {}

를 쓸 때.:has{}대부분의 주요 브라우저에서 지원되지는 않습니다.지원이 개선되고 있습니다.

지난 몇 년간 이 답변에는 "아직 지원되지 않습니다"라는 의견이 수십 개(현재는 삭제됨) 있습니다.더 이상 추가하지 마십시오.답변에는 정기적으로 업데이트되는 브라우저 지원 차트에 대한 링크가 있습니다.

고려해 보십시오.`order`플렉스 및 그리드 레이아웃의 속성.

아래 예제에서는 플렉스박스에 초점을 맞추겠지만 그리드에도 동일한 개념이 적용됩니다.

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; }
```

...그리고 voila!이전 형제 선택기가 태어납니다(또는 최소한 시뮬레이션됨).

다음은 전체 코드입니다.

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. 표시 순서:order

유연 항목은 기본적으로 원본 문서에 나타나는 것과 같은 순서로 표시되고 배치됩니다. 그order속성을 사용하여 이 순서를 변경할 수 있습니다.

그order속성은 플렉스 항목을 순서 그룹에 할당하여 플렉스 컨테이너 내에 나타나는 순서를 제어합니다.한 번이면 됩니다.<integer>값 - 플렉스 항목이 속한 서수 그룹을 지정합니다.

이셜니.order모든 플렉스 항목의 값은 0입니다.

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에 대한 두 가지 구식 믿음

플렉스박스는 CSS에 대한 오랜 믿음을 깨뜨리고 있습니다.

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

이 믿음이 널리 퍼져 있다고 말하는 것은 절제된 표현일 것입니다.다음은 스택 오버플로에 대한 관련 질문의 샘플입니다.

위에서 설명한 바와 같이, 이 믿음은 완전히 사실이 아닙니다.이전 는 플렉스 이형선에는플렉를스사전 CSS용서수있다를 하여 할 수 .order소유물.

그z-index신화

또 다른 오랜 믿음은z-index배치된 요소에서만 작동합니다.

실제로 사양의 최신 버전인 W3C Editor's Draft는 여전히 다음과 같이 사실이라고 주장합니다.

: 9.9.1 "즉, 다음과 같다:z-index

z-index

값: auto | | 상속

이니셜: auto

적용 대상: 배치된 요소

상속됨: 없음

백분율: 해당 없음

미디어: 시각적

계산된 값: 지정된 대로

_(추가됨)

그러나 실제로는 이 정보는 구식이고 부정확합니다.

플렉스 항목 또는 그리드 항목인 요소는 다음과 같은 경우에도 스택 컨텍스트를 생성할 수 있습니다.position이라static.

4.3. 유연한 항목 Z-오더

순서 순서를 사용하는 과 정확히 .z-index 의 값auto합니다.position이라static.

순서:5.4. Z축 주문:z-index

순서 된 문서 를 사용하는 것을 블록과 .z-index 의 값auto합니다.position이라static.

다음은 의 시연입니다.z-index위치가 지정되지 않은 Flex 항목 작업: https://jsfiddle.net/m0wddwxs/

저도 같은 질문을 했지만, 그 때 저는 "흐흐"한 순간을 가졌습니다.쓰는 대신에

x ~ y

글을 쓰다

y ~ x

분명히 이것은 "y"가 아닌 "x"와 일치하지만, "일치가 있습니까?" 질문에 답합니다. 간단한 DOM 트래버설은 Javascript에서 루프하는 것보다 더 효율적으로 올바른 요소로 이동할 수 있습니다.

저는 원래 질문이 CSS 질문이었기 때문에 이 답변은 아마도 완전히 무관하다는 것을 알고 있지만, 다른 Javascript 사용자들도 저처럼 검색을 통해 질문에 실수를 할 수 있습니다.

이전 선택기는 없지만 다음의 조합을 사용할 수 있습니다.:not그리고.~("선택기 뒤에").역순도 없고 자바스크립트도 없습니다.

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}

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

저는 제 접근 방식이 "style all divs, after divs의 스타일링을 제거하는 것보다", 자바스크립트 또는 역순을 사용하는 것보다 더 단순하다고 생각합니다.

세 가지 요령:
기본적으로, HTML에서 당신의 요소의 HTML 순서를 뒤집고,
리고사용을 합니다.~ 다음 형제 연산자:

CSS Flex 및 행 역방향 사용

.reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background:gold;
}

Hover a SPAN and see the previous elements being styled!<br>

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

Flex with direction: RTL 사용

.reverse {
  display: inline-flex;
  direction: rtl;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

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

float right

.reverse { 
  display: inline-block;
}
.reverse span{
  float: right; 
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background: red;
}

Hover a SPAN and see the previous elements being styled!<br>

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

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

두 개의 도끼 선택기를 사용할 수 있습니다.`!`그리고.`?`

기존의 CSS에는 두 개의 후속 형제 선택기가 있습니다.

+바로 이어지는 형제자매 선택기입니다.
~다음 형제 선택기입니다.

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

그러나 액스 CSS 포스트 프로세서 라이브러리에는 두 개의 이전 형제 선택기가 있습니다.

?바로 이전 형제자매 선택기입니다.+)
!이전의 형제 선택기입니다.~)

작업 예제:

아래 예에서는:

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

한계

다음 요소의 클래스를 기준으로 이전 요소를 선택할 수 없습니다.
유사 클래스에 대해서도 동일합니다.

당신은 이중 부정을 사용할 수 있습니다.

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

를 바꿉니다.SELECTOR 중 TAG또는.CLASS (사용)#ID너무 구체적일 수 있습니다.를 바꿉니다.FILTER 다른사함께과람과 .:PSUEDO-SELECTOR(나는 단지 시도했을 뿐입니다.:hover) 또는.CLASS(Javascript를 통해 전환하는 방법에 대한 자세한 내용).

일반적인 용도는 아마도 호버링에 의존하기 때문입니다(다음 예 참조).

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}

<div class="parent">
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
 </div>

이전 형제자매만 호버에 스타일을 추가한 것처럼 보이도록 호버에 있는 다음 형제자매의 스타일을 재정의합니다.

ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

제 요구 사항은 @Quentin의 답변에서 이전 형제자매를 선택한 후 현재 호빙된 항목의 이전 및 다음 두 형제자매를 선택하는 것이었습니다.

.child{
  width: 25px;
  height: 25px;
}

.child:hover {
    background:blue;
}

 .child:has( + .child:hover) {
  background: yellow;
}

.child:has(+ .child + .child:hover){
  background:green;
}

.child:hover + .child {
  background: red;
}

.child:hover + .child + .child {
  background: magenta;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

이전 형제자매를 모두 선택하려면

.child {
    width: 25px;
    height: 25px;
}

.child:hover {
    background: blue;
}

.child:has(~ .child:hover) {
    background: red;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

만약당이정위안다면를치확한신▁if안면▁an다.:nth-child()다음 형제자매를 모두 제외하는 것이 효과적입니다.

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

하면 다 수 있어요.lis는 3일 이전(예: 1일 및 2일)입니다.하지만 제 생각에 이것은 보기 흉하고 사용 사례가 매우 빠듯합니다.

오른쪽에서 왼쪽으로 n번째 자식을 선택할 수도 있습니다.

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

그것도 마찬가지입니다.

아니요. CSS로는 불가능합니다."캐스케이드"를 마음에 새깁니다 ;-).

하지만, 만약 당신이 당신의 페이지에 자바스크립트를 추가할 수 있다면, 약간의 jQuery는 당신을 당신의 최종 목표로 이끌 것입니다.
jQuery를 사용할 수 .find대상 요소/클래스/ID에 대해 "미리 보기"를 수행한 다음, 대상을 선택하기 위해 역추적합니다.
그런 다음 jQuery를 사용하여 요소의 DOM(CSS)을 다시 작성합니다.

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

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

모든 "먼모든항선니다합택을목"를 선택합니다.<ul> 오는에 바로 s.<p>.
의 모든 "백트랙"을하여 "을 선택합니다.<p>그 세트에서 s.<ul>s의

실제로 jQuery를 통해 "이전 형제"가 선택되었습니다.
이제 다음을 사용합니다..css해당 요소에 대한 CSS 새 값을 전달하는 함수입니다.

제 경우에는 ID가 있는 DIV를 선택하는 방법을 찾고 있었습니다.#full-width그러나 클래스를 가진 (간접) 후손 DIV가 있는 경우에만..companies.

는 나는을모 HTML든통다니습제했▁▁under의 모든 했습니다..companies그러나 위의 HTML을 변경할 수 없습니다.
그리고 캐스케이드는 오직 한 방향으로만 갑니다: 아래로.

저는 ALL을 할 수 있었습니다.#full-widths의
아니면 제가 선택할 수 있습니다..companiesa만 뒤따랐던#full-width.
하지만 나는 선택할 수 없었습니다.#full-width진행된 s .companies.

그리고, 다시, 나는 추가할 수 없었습니다..companiesHTML의 더 높은 곳에.HTML의 그 부분은 외부에서 작성되었고, 우리의 코드를 감쌌습니다.

하지만 jQuery를 사용하면 필요한 항목을 선택할 수 있습니다.#full-widths, 그런 다음 적절한 스타일을 지정합니다.

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

이것이 모두를 찾습니다.#full-width .companies 선택할 수 있는 합니다..companies선택기가 CSS의 표준에서 특정 요소를 목표로 하는 데 사용되는 방법과 유사합니다.
그러면 사용합니다..parents로 추적 의모뒤 "로적추하를"의 합니다..companies,
이러한 그나이결유필록도터다니합링지하과만러러한▁only다▁but만 유지합니다.#fill-width 소들결서, 그래에는.
▁a▁selects다▁only니▁it합만 선택합니다.#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 요소입니다.
.find: 선택기, jQuery 개체 또는 요소로 필터링된 일치된 요소의 현재 집합에서 각 요소의 하위 항목을 가져옵니다.
.부모:일치하는 요소 집합에서 각 요소의 바로 앞에 있는 형제를 가져옵니다.선택기가 제공된 경우 이전 형제자매는 해당 선택기와 일치하는 경우에만 검색됩니다(목록에 나열된 요소/선택기만 포함하도록 결과를 필터링함).
.css: 일치하는 요소 집합에 대해 하나 이상의 CSS 속성을 설정합니다.

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

예를 들어 다음과 같습니다.

<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 여백으로 설정되고 LI 내에 UL 요소(또는 다른 태그)가 없는 링크의 경우 다시 0으로 재설정됩니다.

/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

저는 가장 쉬운 해결책을 찾았습니다.그것은 당신이 하는 일에 따라서만 적용될 수 있습니다.

아래 예제에서 "sibling_2"에 마우스를 올려 "sibling_1"을 변경하려고 합니다.

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

이전 요소 선택기가 없기 때문에 'sibling_1'과 'sibling_2'를 전환하여 동일한 모양으로 적용하면 됩니다.

.parent {
  display: flex;
  flex-direction: row-reverse;
}

이제 그런 식으로 선택할 수 있습니다.

.sibling_1:hover ~ .sibling_2 {
  #your CSS
}

안타깝게도 "이전" 형제 선택기는 없지만 위치 지정(예: 오른쪽 이동)을 사용하여 동일한 효과를 얻을 수 있습니다.그것은 당신이 무엇을 하려고 하는지에 달려 있습니다.

나의 경우, 나는 주로 CSS 5성 등급 시스템을 원했습니다.이전 별에 색을 입히거나 아이콘을 바꾸어야 합니다.각 요소를 올바르게 띄움으로써 저는 본질적으로 동일한 효과를 얻고 있습니다(따라서 별에 대한 html은 '뒤로'로 작성되어야 함).

저는 이 예에서 FontAwesome을 사용하고 있으며 fa-star-o와 fa-star http://fortawesome.github.io/Font-Awesome/ 의 유니코드를 교환하고 있습니다.

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)

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

없어요, 그리고 있어요.

입력 앞에 레이블을 배치해야 하는 경우, 입력 뒤에 레이블을 배치하고 레이블과 입력을 모두 div 내부에 유지한 후 div 스타일을 다음과 같이 지정합니다.

.input-box {
  display: flex;
  flex-direction: column-reverse;
}

<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

이제 CSS로 제공되는 표준 다음 형제자매 스타일링 옵션을 적용할 수 있습니다. 그러면 이전 형제자매 스타일링을 사용하는 것처럼 나타납니다.

나는 이전 형제 tr을 선택하기 위한 해결책이 필요했습니다.저는 React 및 Styled-component를 사용하여 이 솔루션을 고안했습니다.이것은 저의 정확한 해결책이 아닙니다(이것은 몇 시간 후에 메모리에서 나온 것입니다).set Highlighter Row 기능에 결함이 있는 것으로 알고 있습니다.

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;
    }
`;

이러한 선택기는 없지만 DOM API에는 읽기 전용 속성이 있습니다.

Node.previousSibling

플렉스 박스에 내 요소를 넣은 다음 사용하여 이 문제를 해결했습니다.flex-direction: column-reverse.

그런 다음 HTML의 요소를 수동으로 반전(역순으로 배치)해야 했고, 정상처럼 보였고 작동했습니다!

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

사용할 수 있습니다.:has()하기와 같이

.thePrevious:has(+ .theNextSibling)

저는 이것을 다음과 같이 중복되는 부트스트랩 모델을 수정하는 데 사용했습니다.여러 개인 경우 이전 모델이 숨겨집니다.

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

실제로 CSS에서 이전 형제를 선택할 수 있는 선택기가 없습니다.하지만 특정한 속임수를 사용하는 것은 가능합니다.예를 들어, 요소 위로 마우스를 이동할 때 이전 요소의 스타일을 변경하려는 경우 다음을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .element:has(+ .next-element:hover){
      /* here your style for .element */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
    <div class="next-element"></div>
  </div>
</body>
</html>

이 경우 .next-element 위에 마우스를 놓으면 위에서 정의한 대로 .element의 스타일이 변경됩니다.

저는 비슷한 문제를 가지고 있었고 이러한 성격의 모든 문제가 다음과 같이 해결될 수 있다는 것을 알게 되었습니다.

모든 항목에 스타일을 지정합니다.
선택한 항목에 스타일을 지정합니다.
+ 또는 ~를 사용하여 다음 항목에 스타일을 지정합니다.

이렇게 하면 현재 항목, 이전 항목(현재 및 다음 항목으로 재정의된 모든 항목) 및 다음 항목의 스타일을 지정할 수 있습니다.

예:

/* 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는 별 등급을 위해 모든 이전 형제자매를 선택합니다.

그래서 저는 모든 사람들의 반응을 이용하여 제 솔루션을 게시하고 누구나 이 솔루션을 참조로 사용할 수 있으며 개선 사항을 추천할 수 있습니다.

// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};

.star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}

<div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

요소에 상태로 . 를 위해 사용된 나의사용개사이례전요는스변포에 2의만있항 2했다니습변호야해경로버는목경상고요하소커위에스을타일소▁for▁was▁only▁style▁case개다나▁on▁element▁previous▁change. 그렇게 하기 위해 사용되었습니다.:focus-within그리고.:hover사이비 종교의

포커스/오프라인 이벤트가 발생할 때마다 선택하는 것이 좋습니다.

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;}

<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

골드 스타를 위한 CSS만을 사용하는 제 작업 솔루션입니다(특히 이 경우 SCSS).

나는 컨테이너 디브 안에 5개의 초기 회색 별을 가지고 있습니다.
컨테이너 div의 호버 위에, 나는 모든 별을 금으로 만듭니다.
특정 별 위를 맴돌면, 나는 모든 후속 형제자매 div를 회색으로 만듭니다.

아래는 svelte code입니다 (그러나 HTML로 쉽게 변환할 수 있습니다)

<button id="review">
        <div id="star-container">
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
        </div>
</button>

<style lang="scss">
  #review {
    color: $cool-gray;
    #star-container {
      display: flex;
      &:hover {
        color: $custom-gold;
      }
      div {
        &:hover ~ div {
          color: $cool-gray;
        }
      }
    }
  }
</style>

이벤트가 발생한 항목의 첫 번째 이전 형제를 선택할 때 유용한 has()라는 새로운 psudo 클래스가 있습니다.Jim Nielsen의 블로그 게시물이 있습니다. 당신에게 도움이 될 수도 있습니다.

여기에 링크 설명 입력

언급URL : https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector

'IT' 카테고리의 다른 글

루비에서 해시를 복사하려면 어떻게 해야 합니까? (0)	2023.06.02
SQL Server 날짜/시간 LIKE 선택? (0)	2023.06.02
배열이 비어 있는지 또는 존재하는지 확인하는 방법은 무엇입니까? (0)	2023.06.02
Ruby File.open 모드 및 옵션은 무엇입니까? (0)	2023.06.02
WPF 데이터 그리드의 텍스트 정렬 (0)	2023.06.02

현재글"이전 형제" 선택기가 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

AngularJS, JSON, JavaScript, sql-server, Java, C, php, Ajax, oracle, git, powershell, Python, MySQL, spring-boot, MongoDB, WordPress, MariaDB, jQuery, Excel, reactjs,

Today :
Yesterday :

itgroup

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

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

고려해 보십시오.`order`플렉스 및 그리드 레이아웃의 속성.

jsFiddle

사이드 노트 – CSS에 대한 두 가지 구식 믿음

CSS Flex 및 행 역방향 사용

Flex with direction: RTL 사용

float right

두 개의 도끼 선택기를 사용할 수 있습니다.`!`그리고.`?`

다른 Flexbox 솔루션

한계

'IT' 카테고리의 다른 글

'IT'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

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

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

고려해 보십시오.order플렉스 및 그리드 레이아웃의 속성.

jsFiddle

사이드 노트 – CSS에 대한 두 가지 구식 믿음

CSS Flex 및 행 역방향 사용

Flex with direction: RTL 사용

float right

두 개의 도끼 선택기를 사용할 수 있습니다.!그리고.?

다른 Flexbox 솔루션

한계

'IT' 카테고리의 다른 글

'IT'의 다른글

관련글

티스토리툴바

고려해 보십시오.`order`플렉스 및 그리드 레이아웃의 속성.

두 개의 도끼 선택기를 사용할 수 있습니다.`!`그리고.`?`