Başka bir öğeden sonra ilk oluşan öğeyi seçin

114

Bir sayfada aşağıdaki HTML kodu var:

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

Benim içinde .cssben oldum tarzına aşağıdaki SEÇİCİNİN var h4elemanı. Yukarıdaki HTML kodu, tüm kodun yalnızca küçük bir parçasıdır; divbir shadowbox'a ait olan birkaç tane daha var :

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

Öyleyse, öğem için doğru stile sahibim h4, ancak pHTML’imdeki etiketi de biçimlendirmek istiyorum .

Bu CSS seçicilerle mümkün müdür? Ve evet ise, bunu nasıl yapabilirim?

html css css-selectors

— soymak
kaynak

201

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

Buna komşu kardeş seçici denir .

— Phrogz
kaynak

1

Bir alternatif, h4öğelerinizi bulmak için JS'yi kullanmak , sonraki kardeşe yürümek ve buna bir CSS sınıfı eklemektir. JQuery ile bu basitçe$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Bunun yalnızca ilkini takip eden elemanlarda HEMEN çalıştığını unutmayın. Sonraki ikinci html öğesine sahip olmak istiyorsanız, bunu şu şekilde zincirleyebilirsiniz: #selector .original + h4 + p, bir .original öğeden sonra bir h4'ü takip eden p'yi elde etmek için. Çok yararlı

— user1610743

31

Gerçek örneğiniz için bitişik seçiciyi (+) kullanmak istersiniz.

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>

Ancak, ardışık tüm paragrafları seçmek isterseniz, genel kardeş seçiciyi (~) kullanmanız gerekir.

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>

Maalesef IE 7+ sürümünde hatalı olduğu biliniyor .

— Joel Mellon
kaynak

16

Bu tür şeyleri kendi kendime çözmeye çalışırken buna vur.

Bir p'den başka bir şey olduktan sonra elementle ilgilenen bir seçici yaptım.

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

Umarım bu, onu bulan herkese yardımcı olur :)

— Tom
kaynak

9

*Başlıkta açıklanan herhangi bir öğe ile eşleşmeleri kullanmak . Benim için faydalı bir hatırlatmaydı.

— James EJ

1

Soruya uyan tek cevap budur. Diğer yanıtlar, önceki öğenin türü hakkında önceden bilgi gerektirir.

— Hugo Wijdeveld

0

Yeni başlayanlar için basitçe:

Başka bir öğeden hemen sonra bir öğeyi seçmek isterseniz, +seçiciyi kullanırsınız .

Örneğin:

div + p "+" Öğesi tümünü seçer <p> hemen sonra yerleştirilir elemanları <div>elemanları

Seçiciler hakkında daha fazla bilgi edinmek istiyorsanız bu tabloyu kullanın

— Trooller
kaynak

0

En son CSS kullanıyorum ve "+" benim için çalışmadı, bu yüzden sonuçta

:ilk çocuk

— VNicholson
kaynak