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

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