Jaka jest składnia selektora w CSS dla następnego elementu?

200

Jeśli mam tag nagłówka <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

a potem mam akapit <p>stuff here</p>.

Jak mogę zapewnić użycie CSS, którego używa każdy <p>znacznik następujący h1.hc-reform:clear:both;

czy to byłoby:

h1.hc-reform > p{
     clear:both;
}

z jakiegoś powodu to nie działa.

html css css-selectors siblings Tony Noriega
źródło

Odpowiedzi:

397

Nazywa się to sąsiednim selektorem rodzeństwa i jest reprezentowane przez znak plus ...

h1.hc-reform + p {
  clear:both;
}

Uwaga: nie jest to obsługiwane w IE6 lub starszej wersji.

Josh Stodola
źródło
4
To wybrałoby to, pco nastąpi zaraz po h1.hc-reform. Z drugiej strony może być to jedyna aplikacja, która clear: bothmusi zostać nałożona, aby działała, ponieważ po prostu usuwa h1liczbę zmiennoprzecinkową, więc nadal jest poprawną odpowiedzią.
BoltClock
@BoltClock Tak, masz rację, źle przeczytałem specyfikację i usunąłem ten komentarz, ponieważ był niepoprawny. Ten selektor będzie pasował tylko do ptego, który jest bezpośrednio poprzedzony h1.hc-reform(oczywiście z tym samym elementem nadrzędnym).
Josh Stodola
4
wow nie wiedział o sąsiednim selektorze rodzeństwa. Fajnie dzięki!
teoretuje
1
~ jest lepszym wyborem w tym przypadku. Oto działający JSfiddle jsfiddle.net/dZAtt
ProblemsOfSumit
warto zauważyć, że to nie działa, jeśli pierwszy element ma jakieś dzieci
72GM
60

Możesz użyć selektora rodzeństwa ~ :

h1.hc-reform ~ p{
     clear:both;
}

Spowoduje to wybranie wszystkich następujących po nim pelementów .hc-reform, nie tylko pierwszego.

Stephan Muller
źródło
Błędy IE w pierwszym łączu są niejasnymi przypadkami na krawędziach i prawdopodobnie dlatego quirksmode je pomija.
Axe.
14

nie >to selektor podrzędny.

ten, który chcesz +

więc spróbuj h1.hc-reform + p

obsługa przeglądarki nie jest świetna

Moin Zaman
źródło
2020: Obsługa przeglądarek jest świetna po dziesięciu latach. Tylko informacja dla nowicjuszy CSS.
AlexioVay
8

Jest >to selektor podrzędny . Więc jeśli Twój HTML wygląda tak:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... to twój bilet.

Ale jeśli Twój HTML wygląda tak:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Następnie chcesz sąsiedni selektor :

h1.hc-reform + p{
     clear:both;
}
Richard JP Le Guen
źródło
4
Mam nadzieję, że nie zagnieździł p wewnątrz h1. Poza tym sąsiadujące zaznacza tylko pierwsze p.
Stephan Muller,
2

Nie dokładnie. Te h1.hc-reform > pśrodki „każdy pdokładnie poniżej poziomu h1.hc-reform”.

To czego chcesz h1.hc-reform + p. Oczywiście może to powodować pewne problemy w starszych wersjach programu Internet Explorer; jeśli chcesz, aby strona była zgodna ze starszymi IE, utkniesz z albo ręcznym dodawaniem klasy do akapitów, albo używaniem JavaScript (na przykład w jQuery możesz zrobić coś takiego $('h1.hc-reform').next('p').addClass('first-paragraph')).

Więcej informacji: http://www.w3.org/TR/CSS2/selector.html lub http://css-tricks.com/child-and-sibling-selectors/

Justin Russell
źródło