Apa arti dari pemilih CSS ">" (lebih dari tanda)?

476

Sebagai contoh:

div > p.some_class {
  /* Some declarations */
}

Apa sebenarnya arti dari >tanda itu?

css css-selectors Misha Moroshko
sumber

Jawaban:

673

>adalah penggabung anak , kadang-kadang keliru disebut turunan langsung keturunan. 1

Itu berarti pemilih div > p.some_classhanya memilih paragraf .some_classyang bersarang langsung di dalam a div, dan tidak ada paragraf yang bersarang lebih jauh di dalam.

Sebuah ilustrasi:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Apa yang dipilih dan apa yang tidak:

  1. Dipilih
    Ini p.some_classterletak tepat di dalam div, maka hubungan orangtua-anak dibangun antara kedua elemen.

  2. Tidak dipilih
    Ini p.some_classdikandung oleh blockquotedalam div, bukan dari divitu sendiri. Meskipun ini p.some_classadalah keturunan dari div, itu bukan anak kecil; itu cucu.

    Akibatnya, sementara div > p.some_classtidak akan cocok dengan elemen ini, div p.some_classakan, menggunakan kombinator keturunan sebagai gantinya.

1 Banyak orang melangkah lebih jauh dengan menyebutnya "anak langsung" atau "anak langsung", tetapi itu sama sekali tidak perlu (dan sangat menjengkelkan bagi saya), karena elemen anak langsung dengan definisi , jadi mereka berarti hal yang sama persis. Tidak ada yang namanya "anak tidak langsung".

BoltClock
sumber
2
+1 Apakah ini benar-benar disebut pemilih anak ? Jika demikian, itu cukup menyesatkan. Saya akan berpikir #something aakan menjadi pemilih anak.
alex
2
@alex: ya :) #something abisa berarti acucu atau cucu yang besar #something(tidak memperhitungkan kedalaman sarang).
BoltClock
12
@ alex itu disebut combinator anak , ruang ini disebut combinator keturunan
robertc
33
Ketika seseorang adalah anak dari kakek-nenek mereka, kita berhadapan dengan contoh inses yang sangat buruk. Untungnya, itu tidak mungkin di HTML.
Quentin
8
Saya tidak mendengar ada orang awam yang menyebut anak-anak mereka sebagai anak langsung mereka demi kejelasan.
BoltClock
41

> (tanda lebih besar dari) adalah CSS Combinator.

Combinator adalah sesuatu yang menjelaskan hubungan antara penyeleksi.

Pemilih CSS dapat berisi lebih dari satu pemilih sederhana. Di antara penyeleksi sederhana, kita dapat menyertakan kombinator.

Ada empat kombinasi yang berbeda di CSS3:

  1. pemilih keturunan (spasi)
  2. pemilih anak (>)
  3. pemilih saudara terdekat (+)
  4. pemilih saudara umum (~)

Catatan: < tidak valid di pemilih CSS.

masukkan deskripsi gambar di sini

Sebagai contoh: 

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Keluaran:

masukkan deskripsi gambar di sini

Informasi lebih lanjut tentang CSS Combinators

Premraj
sumber
developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj Terima kasih atas penjelasan luar biasa dari penyeleksi css orangtua-anak!
YCode
Apa artinya itu ketika Anda mendapatkan sesuatu seperti .entry-content > * {"code" }yang diikuti .entry-content {"other code" }? Tidak .entry-content > *mencakup semua anak-anak dari entry-content?
YCode
14

Seperti yang disebutkan orang lain, itu adalah pemilih anak. Inilah tautan yang sesuai.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Dagg Nabbit
sumber
Terima kasih banyak untuk tautannya! Saya juga menemukan "penyeleksi saudara terdekat" di sana.
Misha Moroshko
Anda akan menemukan dukungan browser di Sitepoint. Tidak bekerja di IE6 jika itu penting untuk proyek Anda, oke di tempat lain. Sumber daya ini adalah esp. berguna untuk saudara kandung
,:
10

Ini mencocokkan pelemen dengan kelas some_classyang langsung di bawah a div.

dan04
sumber
5

Semua ptag dengan kelas some_classyang merupakan anak-anak langsung dari divtag.

tschaible
sumber
4
html 
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
css 
div > p.some_class{
    color:red;
}

Semua anak langsung yang <p>bersama .some_classakan menerapkan gaya pada mereka.

suraj rawat
sumber
3

(pemilih anak) diperkenalkan di css2. div p {} pilih semua elemen p yang dideklarasikan dari elemen div, sedangkan div> p memilih hanya elemen p anak, bukan cucu, cicit, dan sebagainya.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Untuk informasi lebih lanjut tentang CSS Ce [lector dan penggunaannya, periksa blog saya, pemilih css dan pemilih css3

Avinash Malhotra
sumber
0

Tanda yang lebih besar (>) pemilih di CSS berarti pemilih di sebelah kanan adalah keturunan langsung / anak dari apa pun yang ada di sebelah kiri.

Sebuah contoh:

article > p { }

Berarti hanya gaya paragraf yang muncul setelah artikel.

otentikasi tinggi
sumber