Pilih elemen yang pertama muncul setelah elemen lainnya

113

Saya mendapatkan kode HTML berikut di sebuah halaman:

<h4>Some text</h4>
<p>
Some more text!
</p>

Di saya, .csssaya punya pemilih berikut untuk memberi gaya pada h4elemen. Kode HTML di atas hanyalah sebagian kecil dari keseluruhan kode; ada beberapa divlagi yang terbungkus milik shadowbox:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

Jadi, saya memiliki gaya yang benar untuk h4elemen saya , tetapi saya juga ingin memberi gaya ptag di HTML saya.

Apakah ini mungkin dengan pemilih CSS? Dan jika ya, bagaimana saya bisa melakukan ini?

html css css-selectors

— rampok
sumber

199

#many .more.selectors h4 + p { ... }

Ini disebut pemilih saudara yang berdekatan .

— Phrogz
sumber

1

Alternatifnya adalah menggunakan JS untuk menemukan h4elemen Anda , berjalan ke saudara berikutnya dan menambahkan kelas CSS ke sana. Dengan jQuery, ini akan menjadi$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Perhatikan bahwa ini hanya berfungsi pada elemen setelah yang pertama SEGERA. Jika Anda ingin memiliki elemen html kedua berikutnya, Anda dapat merangkainya seperti ini: #selector .original + h4 + p untuk mendapatkan p setelah h4 mengikuti elemen .original. Sangat berguna

— pengguna1610743

30

Untuk contoh literal Anda, Anda ingin menggunakan selektor yang berdekatan (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

Namun, jika Anda ingin memilih semua paragraf yang berurutan, Anda harus menggunakan pemilih saudara umum (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

Sayangnya, ini diketahui bermasalah di IE 7+ .

— Joel Mellon
sumber

16

Pukul saja ini ketika mencoba menyelesaikan jenis hal ini sendiri.

Saya melakukan selektor yang berhubungan dengan elemen setelah menjadi sesuatu selain p.

.here .is.the #selector h4 + * {...}

Semoga ini bisa membantu siapa saja yang menemukannya :)

— Tom
sumber

9

Menggunakan *kecocokan elemen apa pun seperti yang dijelaskan dalam judul. Merupakan pengingat yang berguna bagi saya.

— James EJ

1

Ini adalah satu-satunya jawaban yang cocok dengan pertanyaannya. Jawaban lain membutuhkan pengetahuan sebelumnya tentang jenis elemen sebelumnya.

— Hugo Wijdeveld

0

Cukup untuk para pemula:

Jika Anda ingin memilih elemen segera setelah elemen lain Anda menggunakan +selektor.

Sebagai contoh:

div + pElemen "+" memilih semua <p>elemen yang ditempatkan tepat setelah <div>elemen

Jika Anda ingin mempelajari lebih lanjut tentang pemilih, gunakan tabel ini

— Trooller
sumber

0

Saya menggunakan CSS terbaru dan "+" tidak berhasil untuk saya, jadi saya menggunakan

:anak pertama

— VNicholson
sumber