Pemilih untuk satu tag langsung diikuti oleh tag lainnya

88

Ini memilih semua <B>tag yang langsung diawali dengan <A>tag:

A+B {
    /* styling */
}

Apa pemilih untuk semua <A>tag yang langsung diikuti oleh <B>tag?

Berikut contoh HTML yang sesuai dengan pertanyaan saya:

<a>some text</a>
<b>some text</b>
css css-selectors Mostafa Farghaly
sumber
3
Tolong beri kami contoh DOM bagaimana Adan Bterkait.
Gumbo
2
Mereka terkait karena mereka adalah saudara, dan B diikuti oleh A. OP ingin memilih semua byang diikuti oleh as, mirip dengan di a+bmana Anda dapat memilih semua byang didahului secara langsung oleh a.
Anthony
2.5 tahun kemudian, apakah ada pembaruan untuk jawaban ini? Saya juga menargetkan a diikuti oleh b.
chovy

Jawaban:

29

Anda tidak bisa di css.

Edit: Agar sedikit lebih membantu, jika Anda menggunakan misalnya jQuery (pustaka JavaScript), Anda dapat menggunakan .prev().

jeroen
sumber
itu jahitan satu-satunya solusi yang menggunakan JavaScript
Mostafa Farghaly
2
Terima kasih jeroen! Itu memperbaiki masalah saya. Karena "A" saya melayang ke kiri dan "B" mengambang ke kanan, tidak masalah apa urutan markup saya.
BobRodes
53

Apakah Anda bermaksud memberi gaya A karena ia memiliki elemen B langsung di dalam atau diikuti? Seperti ini:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

Anda tidak dapat melakukan hal seperti itu di CSS (belum). Eric Meyer menyatakan bahwa pemilih semacam ini telah dibahas beberapa kali di milis CSS, dan tidak dapat dilakukan. Dave Hyatt, salah satu pengembang inti WebKit, berkomentar dengan penjelasan yang bagus tentang mengapa hal itu tidak dapat dilakukan.

Lihat: posting blog Shaun Inman dan komentar oleh Eric Meyer .
David Hyatt juga mempertimbangkannya .

Nick Presta
sumber
maksud saya yang kedua, saya mengerti masalahnya terima kasih nick :)
Mostafa Farghaly
17

Anda HANYA dapat melakukan yang sebaliknya: Ini memilih semua tag yang didahului langsung oleh tag.

Ini secara logis setara dengan permintaan Anda.

Saya sering menggunakan ini untuk memberi gaya pada deretan banyak kotak centang dengan label

CSS:

label+input {
    margin-left: 4px;
}

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>
Marco Marsala
sumber
3
Saya pikir Anda bermaksud mengetik "input + label" di CSS sehingga margin kiri diterapkan ke label.
CAK2
1
@ CAK2 - Saya pikir dia bersungguh-sungguh. Dengan melakukan label+inputmargin diterapkan ke semua inputelemen mulai dari yang kedua . Ini adalah cara kreatif untuk menciptakan ruang di antara mereka tetapi tidak di awal atau di akhir baris. Dalam hal ini, itu setara dengan input:not(:first-child).
David
1

Meskipun tidak terlalu berguna, saat ini Anda dapat mencapai perilaku ini dengan membalik urutan elemen Anda baik saat Anda membuat HTML dan dengan menerapkan aturan CSS: display: flexdanflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>
Luaskan cuplikan

Selain itu, jika Anda memiliki 2 atau lebih elemen sebaris, Anda dapat mencapainya dengan menerapkan float: right, karena akan ditampilkan dalam urutan terbalik:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>
Luaskan cuplikan

Mihai Matei
sumber