Pertanyaan Terapkan gaya ke elemen, hanya jika elemen tertentu ada di sebelahnya


Saya menggunakan <section> tag pada beberapa halaman, tetapi pada SATU halaman saya menggunakan <aside> tag yang didahului oleh <section> menandai.

Dalam kasus yang saya punya <section> segera diikuti oleh <aside>, Saya ingin menerapkan lebar untuk keduanya dan memiliki bagian mengambang kiri, dan mengapung samping kanan.

Pada dasarnya, jika saya punya <section> dan <aside> Saya ingin gayanya bekerja seperti ini:

section {
    width: 500px;
    float: left;
    padding: 8px;
}

aside {
    padding:8px; 
    width:400px;
    float:right;
}

Jika saya hanya memiliki <section> Saya ingin menjadi seperti:

section {
    padding: 8px;
}

Apakah ada cara saya dapat melakukan ini dengan pernyataan bersyarat di CSS3, atau kelas pseudo, tanpa harus menggunakan JavaScript, kelas khusus, atau file CSS terpisah?


6
2018-04-05 02:51


asal


Jawaban:


Ini hanya berfungsi jika <section/> datang setelah <aside/>:

<aside>content</aside>
<!-- if there is another node in between, use the '~' selector -->
<section>content</section>

Dalam hal ini Anda bisa menggunakan aside ~ section atau aside + section:

section {
    padding: 8px;
}
aside + section {
    width: 500px;
    float: left;
}

Dalam semua kasus lainnya Anda harus menggunakan JavaScript karena pemilih ini hanya bekerja dalam satu arah, dari atas ke bawah.

Dengan CSS4 mungkin ada cara menggunakan Subyek pemilih dengan kombinatori Anak, tapi itu masa depan. Selektor ini telah dihapus dari spesifikasi.


11
2018-04-05 02:55