Apa itu sintaks untuk pemilih dalam CSS untuk elemen berikutnya?

200

Jika saya memiliki tag header <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

dan setelah itu saya punya paragraf <p>stuff here</p>.

Bagaimana saya bisa memastikan menggunakan CSS bahwa setiap <p>tag yang mengikuti h1.hc-reformuntuk menggunakan:clear:both;

apakah itu:

h1.hc-reform > p{
     clear:both;
}

untuk beberapa alasan itu tidak berfungsi.

html css css-selectors siblings tony noriega
sumber

Jawaban:

397

Ini disebut pemilih saudara yang berdekatan , dan diwakili oleh tanda plus ...

h1.hc-reform + p {
  clear:both;
}

Catatan: ini tidak didukung di IE6 atau lebih lama.

Josh Stodola
sumber
4
Itu hanya akan memilih pyang datang setelah itu h1.hc-reform. Dan lagi-lagi itu mungkin satu-satunya yang clear: bothperlu diterapkan agar bisa bekerja karena hanya membersihkan h1float, jadi itu masih jawaban yang valid.
BoltClock
@BoltClock Ya Anda benar, saya salah membaca spec dan menghapus komentar itu karena itu salah. Pemilih ini hanya akan cocok dengan pyang segera didahului oleh h1.hc-reform(dengan elemen induk yang sama, tentu saja).
Josh Stodola
4
wow tidak tahu tentang pemilih saudara yang berdekatan. Terima kasih banyak!
berteori
1
~ adalah pemilih yang lebih baik dalam hal ini. Berikut bekerja JSfiddle jsfiddle.net/dZAtt
ProblemsOfSumit
Perlu dicatat bahwa ini tidak berfungsi jika elemen pertama memiliki anak
72GM
60

Anda dapat menggunakan pemilih saudara ~ :

h1.hc-reform ~ p{
     clear:both;
}

Ini memilih semua pelemen yang datang setelahnya .hc-reform, bukan hanya yang pertama.

Stephan Muller
sumber
Bug IE pada tautan pertama adalah hal-hal kecil yang tidak jelas, yang mungkin mengapa quirksmode mengabaikannya.
Kapak.
14

tidak ada >pemilih anak.

yang Anda inginkan adalah +

jadi cobalah h1.hc-reform + p

dukungan browser tidak bagus

Moin Zaman
sumber
2020: Dukungan browser sangat bagus setelah sepuluh tahun. Hanya info untuk pemula CSS.
AlexioVay
8

The >adalah pemilih anak . Jadi jika HTML Anda terlihat seperti ini:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... maka itu tiketmu.

Tetapi jika HTML Anda terlihat seperti ini:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Maka Anda ingin pemilih yang berdekatan :

h1.hc-reform + p{
     clear:both;
}
Richard JP Le Guen
sumber
4
Saya harap dia tidak bersarang di dalam h1 .. Juga, berdekatan hanya memilih p pertama.
Stephan Muller
2

Tidak persis. The h1.hc-reform > pberarti "setiap ptepat satu tingkat di bawahnya h1.hc-reform".

Yang Anda inginkan adalah h1.hc-reform + p. Tentu saja, itu dapat menyebabkan beberapa masalah di versi Internet Explorer yang lebih lama; jika Anda ingin membuat halaman tersebut kompatibel dengan IE yang lebih lama, Anda akan terjebak dengan menambahkan kelas secara manual ke paragraf atau menggunakan beberapa JavaScript (dalam jQuery, misalnya, Anda dapat melakukan sesuatu seperti $('h1.hc-reform').next('p').addClass('first-paragraph')).

Info lebih lanjut: http://www.w3.org/TR/CSS2/selector.html atau http://css-tricks.com/child-and-sibling-selectors/

Justin Russell
sumber