Wybierz pierwszy występujący element po innym elemencie

114

Mam następujący kod HTML na stronie:

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

W moim .cssmam następujący selektor do stylizacji h4elementu. Powyższy kod HTML to tylko niewielka część całego kodu; jest jeszcze kilka divs owiniętych wokół przynależności do shadowboxa:

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

Tak więc mam właściwy styl dla mojego h4elementu, ale chcę również stylizować ptag w moim HTML.

Czy jest to możliwe w przypadku selektorów CSS? A jeśli tak, jak mogę to zrobić?

html css css-selectors Obrabować
źródło

Odpowiedzi:

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

Nazywa się to selektorem sąsiedniego rodzeństwa .

Phrogz
źródło
1
Alternatywą jest użycie JS do znalezienia h4elementów, przejście do następnego rodzeństwa i dodanie do tego klasy CSS. Z jQuery byłoby to po prostu$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');
Phrogz,
2
Zauważ, że działa to tylko na elementach następujących NATYCHMIAST po pierwszym. Jeśli chcesz mieć drugi następny element html, możesz go połączyć w następujący sposób: #selector .original + h4 + p, aby uzyskać p następujące po h4 po elemencie .original. Bardzo przydatne
user1610743
31

W swoim dosłownym przykładzie chciałbyś użyć sąsiedniego selektora (+).

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>

Jeśli jednak chcesz zaznaczyć wszystkie kolejne akapity, musisz użyć ogólnego selektora rodzeństwa (~).

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>

Niestety, IE 7+ zawiera błędy .

Joel Mellon
źródło
16

Po prostu uderz w to, próbując rozwiązać tego typu rzeczy samodzielnie.

Zrobiłem selektor, który zajmuje się elementem po tym, jak jest czymś innym niż p.

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

Mam nadzieję, że pomoże to każdemu, kto go znajdzie :)

Tomek
źródło
9
Używanie *dopasowań dowolnego elementu opisanego w tytule. Było dla mnie pomocnym przypomnieniem.
James EJ
1
To jedyna odpowiedź, która pasuje do pytania. Inne odpowiedzi wymagają wcześniejszej wiedzy na temat rodzaju elementu poprzedzającego.
Hugo Wijdeveld
0

Po prostu dla początkujących:

Jeśli chcesz wybrać element bezpośrednio po innym elemencie, użyj +selektora.

Na przykład:

div + pElement „+” wybiera wszystkie <p>elementy, które są umieszczane bezpośrednio po <div>elementach

Jeśli chcesz dowiedzieć się więcej o selektorach, skorzystaj z tej tabeli

Trooller
źródło
0

Używam najnowszego CSS i "+" nie działa dla mnie, więc skończyłem

:pierworodny

VNicholson
źródło