선택기 div + p (더하기)와 div ~ p (물결표)의 차이점

선택기 div + p (더하기)와 div ~ p (물결표)의 차이점

---

w3schools가 표현하는 방식 은 동일하게 들립니다.

W3Schools의 CSS 참조

div + p
모든 선택 <p>후 즉시 배치 요소 <div>요소를

div ~ p
모든 선택 <p>앞에는되는 요소 <div>요소를

<p>요소가 요소 바로 뒤에 있으면 요소 앞에 요소가 <div>있다는 뜻이 아닙니까?<p><div>

어쨌든 주어진 요소 바로 앞에 있는 요소를 선택할 수있는 선택기를 찾고 있습니다 .

---

인접한 형제 선택자 X + Y

인접한 형제 선택기의 구문은 E1 + E2입니다. 여기서 E2는 선택기의 주제입니다. E1과 E2가 문서 트리에서 동일한 부모를 공유하고 E1이 E2 바로 앞에 오는 경우 선택기가 일치하고 요소가 아닌 노드 (예 : 텍스트 노드 및 주석)를 무시합니다.

ul + p {
   color: red;
}

이 예에서는 이전 요소 바로 앞에 오는 요소 만 선택합니다. 이 경우 각 ul 다음의 첫 번째 단락에만 빨간색 텍스트가 있습니다.

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

일반 형제 선택자 X ~ Y

~ 결합자는 두 선택자를 분리하고 첫 번째 요소가 선행되고 둘 다 공통 부모를 공유하는 경우에만 두 번째 요소와 일치합니다.

ul ~ p {
   color: red;
}

이 형제 결합자는 X + Y와 비슷하지만 덜 엄격합니다. 인접한 선택자 (ul + p)는 이전 선택자 바로 앞에있는 첫 번째 요소 만 선택하지만, 이것은 더 일반화됩니다. 위의 예를 참조하여 ul을 따르는 한 모든 p 요소를 선택합니다.

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

출처

code.tutsplus

일반 형제 선택자 MDN

인접한 형제 선택자 w3

---

<p>요소가 요소 바로 뒤에 있으면 요소 앞에 요소가 <div>있다는 뜻이 아닙니까?<p><div>

맞습니다. 즉, div + p은 (는)의 적절한 하위 집합 입니다 div ~ p. 전자 와 일치하는 것은 필요에 따라 후자와 도 일치합니다.

The difference between + and ~ is that ~ matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.

Both of these points are most succinctly illustrated with a single example, where each rule applies a different property. Notice that the one p that immediately follows the div has both rules applied:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

Anyhow, I'm looking for a selector where I can select an element that is place immediately before a given element.

Unfortunately, there isn't one yet.

---

consider this example:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

---

1) Adjacent Sibling Selectors (S1 + S2)

Adjacent sibling selector is used to select a specified element which is immediate next to another specified element. Both elements should be in the same level.

div + p {
    color:red;
}

Adjacent Sibling Selectors example

2) General Sibling Selectors (S1 ~ S2)

General sibling selector is used to select all specified sibling elements of another specified element.

div ~ p {
   color:red;
}

General Sibling Selectors example

Adjacent Sibling(S1 + S2) vs General Sibling(S1 ~ S2) selectors:

Adjacent sibling(S1 + S2) selector selects immediate sibling element only but general sibling(S1 ~ S2) selector selects all sibling elements of another specified element. Both cases, both elements(S1 and S2) should be in the same level.

Remaining selectors are explained here: https://www.csssolid.com/35-css-selectors-to-remember.html

참고URL : https://stackoverflow.com/questions/26282375/difference-between-the-selectors-div-p-plus-and-div-p-tilde