Div + p (artı) ve div ~ p (tilde) seçicileri arasındaki fark

Yolu, W3Schools bunu öbekleri, aynı ses.

W3Schools'un CSS referansı

div + p
Tüm seçer <p>hemen sonra yerleştirilir elemanları <div>elemanları

div ~ p
Her seçer <p>bir tarafından öncesinde eleman <div>elemanı

Bir <p>öğenin bir öğeden hemen sonra <div>olması, <p>öğenin önünde bir <div>öğenin olduğu anlamına gelmez mi?

Her neyse, belirli bir öğenin hemen önüne yerleştirilmiş bir öğeyi seçebileceğim bir seçici arıyorum .

Bitişik kardeş seçiciler X + Y

Bitişik kardeş seçiciler şu sözdizimine sahiptir: E1 + E2, burada E2, seçicinin konusudur. E1 ve E2, belge ağacında aynı ebeveyni paylaşırsa ve E1, öğe olmayan düğümleri (metin düğümleri ve yorumlar gibi) yok sayarak, E2'den hemen önce gelirse, seçici eşleşir.

ul + p {
   color: red;
}

Bu örnekte, yalnızca önceki öğeden hemen önce gelen öğeyi seçecektir. Bu durumda, yalnızca her ul'den sonraki ilk paragrafta kırmızı metin olur.

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>

Genel kardeş seçiciler X ~ Y

Kombinatör, iki seçiciyi ayırır ve yalnızca ilkinden önce gelirse ikinci öğeyi eşleştirir ve her ikisi de ortak bir ebeveyni paylaşır.

ul ~ p {
   color: red;
}

Bu kardeş birleştirici X + Y'ye benzer, ancak daha az katıdır. Bitişik bir seçici (ul + p), yalnızca önceki seçiciden hemen önce gelen ilk öğeyi seçerken, bu daha genelleştirilmiştir. Yukarıdaki örneğimize başvurarak, bir ul izledikleri sürece herhangi bir p elemanını seçecektir.

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>

Kaynak

code.tutsplus

Genel kardeş seçiciler MDN

Bitişik kardeş seçiciler w3

Bir <p>öğenin bir öğeden hemen sonra <div>olması, <p>öğenin önünde bir <div>öğenin olduğu anlamına gelmez mi?

Doğru. Başka bir deyişle, div + pbir olan öz alt kümesidir ait div ~ peski ile eşleşen bir şey olduğunu - Ayrıca zorunlu olarak, ikincisi tarafından eşleşti.

Arasındaki fark +ve ~olmasıdır ~sürece her ikisi de payı olarak aynı ebeveyn bakılmaksızın birinci elemanın kendi yakınlığı aşağıdaki tüm kardeşler eşleşir.

Bu noktaların her ikisi de, her bir kuralın farklı bir özelliği uyguladığı tek bir örnekle en kısa ve öz şekilde gösterilmiştir. Bildirim bu bir panında takip divhem kurallar uygulanır vardır:

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>

Her neyse, belirli bir öğenin hemen önüne yerleştirilmiş bir öğeyi seçebileceğim bir seçici arıyorum .

Maalesef henüz bir tane yok .

bu örneği düşünün:

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) Bitişik Kardeş Seçiciler (S1 + S2)

Bitişik kardeş seçici, belirtilen başka bir öğenin hemen yanında bulunan belirli bir öğeyi seçmek için kullanılır. Her iki unsur da aynı seviyede olmalıdır.

div + p {
    color:red;
}

Bitişik Kardeş Seçiciler örneği

2) Genel Kardeş Seçiciler (S1 ~ S2)

Genel kardeş seçici, belirtilen başka bir öğenin tüm belirtilen kardeş öğelerini seçmek için kullanılır.

div ~ p {
   color:red;
}

Genel Kardeş Seçiciler örneği

Komşu Kardeş (S1 + S2) ve Genel Kardeş (S1 ~ S2) seçicileri:

Bitişik kardeş (S1 + S2) seçici, yalnızca yakın kardeş öğesini seçer, ancak genel kardeş (S1 ~ S2) seçici, başka bir belirtilen öğenin tüm kardeş öğelerini seçer. Her iki durumda da her iki eleman (S1 ve S2) aynı seviyede olmalıdır.

Kalan seçiciler burada açıklanmıştır: https://www.csssolid.com/35-css-selectors-to-remember.html