Doğrudan bir etiket için seçici ve ardından başka bir etiket

88

Bu, tüm seçer <B>etiketleri doğrudan öncesinde tarafından <A>etiketleri:

A+B {
    /* styling */
}

Herkes için seçici nedir <A>doğrudan etiketleri takip göre <B>etiketleri?

İşte soruma uyan örnek HTML:

<a>some text</a>
<b>some text</b>

css css-selectors

— Mostafa Farghaly
kaynak

3

Pease bize nasıl Ave Bilişkili olduğuna bir DOM örneği verir .

— Gumbo

2

Onlar kardeş olduklarını yılında ilişkilidir ve B A. OP tümünü seçmek istediği izler bizler s abenzer s, a+btüm seçebileceğiniz btarafından doğrudan öncesinde s a.

— Anthony

2,5 yıl sonra, bu yanıtta herhangi bir güncelleme var mı? Ayrıca a ve ardından b'yi hedeflemeyi düşünüyorum.

— chovy

29

CSS'de olamazsın.

Düzenle: Biraz daha yardımcı olması için, örneğin jQuery (JavaScript kitaplığı) kullanıyorsanız, kullanabilirsiniz .prev().

— Jeroen
kaynak

JavaScript kullanan tek çözümü gösteriyor

— Mostafa Farghaly

2

Teşekkürler jeroen! Bu benim sorunumu çözdü. "A" sola ve "B" sağa

— kaydığı için

53

Doğrudan içinde veya takip edilen bir B öğesine sahip olduğu için A stilini mi kastediyorsunuz? Bunun gibi:

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

// OR

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

CSS'de (henüz) böyle bir şey yapamazsınız. Eric Meyer, bu tür bir seçicinin CSS posta listesinde epeyce tartışıldığını ve mümkün olmadığını belirtiyor. Temel WebKit geliştiricilerinden biri olan Dave Hyatt, bunun neden yapılamayacağına dair iyi bir açıklama ile yorum yapıyor.

Şunlara göz atın: Shaun Inman'ın blog yazısı ve Eric Meyer tarafından yapılan yorum .
David Hyatt da dahil oluyor.

— Nick Presta
kaynak

ikinciyi kastediyorum, sorunu anlıyorum teşekkür ederim nick :)

— Mostafa Farghaly

17

YALNIZCA tersini yapabilirsiniz: Bu, doğrudan etiketlerle gelen tüm etiketleri seçer.

Bu, mantıksal olarak isteğinize eşdeğerdir.

Bunu genellikle etiket içeren birçok onay kutusunun stilini belirlemek

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
kaynak

3

CSS'de "input + label" yazmayı düşündüğünüzü düşünüyorum, böylece sol kenar boşluğu etikete uygulanır.

— CAK2

1

@ CAK2 - Doğru demek istediğini düşünüyorum. Yaparak label+inputmarjı tüm uygulanır inputelemanlarının , ikinci bir başlangıç malzemesi . Aralarında boşluk yaratmanın yaratıcı bir yoludur, ancak satırın başında veya sonunda değil. Bu durumda eşdeğerdir input:not(:first-child).

— David

1

Çok kullanışlı olmasa da, günümüzde bu davranışı hem HTML oluştururken hem de CSS kurallarını uygulayarak öğelerinizin sırasını tersine çevirerek gerçekleştirebilirsiniz: display: flexveflex-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>

Snippet'i genişlet

Ayrıca, 2 veya daha fazla satır içi öğeniz varsa float: right, ters sırada görüntüleneceklerinden uygulayarak bunu başarabilirsiniz :

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>

Snippet'i genişlet

— Mihai Matei
kaynak