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.

— Tony Noriega
źródło

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