Select first occurring element after another element

Question

I ve got the following HTML code on a page    lt h4 gt Some text lt  h4 gt   lt p gt  Some more text   lt  p gt    In my  css I ve got the following selector to style the h4 element  The HTML code above is just a small part of the entire code  there are several divs more wrapped around belonging to a shadowbox    sb-wrapper  sb-wrapper-inner  sb-body  myDiv h4       color                  614E43      margin-top            5px      margin-left           6px      So  I have the correct style for my h4 element  but I also want to style the p tag in my HTML   Is this possible with CSS-selectors  And if yes  how can I do this

User · Answer

Just hit on this when trying to solve this type of thing my self.

I did a selector that deals with the element after being something other than a p.

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

Hope this helps anyone who finds it :)

User · Answer

For your literal example you d want to use the adjacent selector       h4   p  color red   any  lt p gt  that is immediately preceded by an  lt h4 gt    lt h4 gt Some text lt  h4 gt   lt p gt I m red lt  p gt   lt p gt I m not lt  p gt    However  if you wanted to select all successive paragraphs  you d need to use the general sibling selector       h4   p  color red   any  lt p gt  that has the same parent as  and comes after an  lt h4 gt    lt h4 gt Some text lt  h4 gt   lt p gt I m red lt  p gt   lt p gt I am too lt  p gt    It s known to be buggy in IE 7  unfortunately

User · Answer

Simplyfing for the begginers   If you want to select an element immediatly after another element you use the   selector   For example   div   p The     element selects all  lt p gt  elements that are placed immediately after  lt div gt  elements    If you want to learn more about selectors use this table

User · Answer

I use latest CSS and  quot   quot  didn t work for me so I end up with  first-child

User · Answer

many  more selectors h4   p           This is called the adjacent sibling selector

[html] Select first occurring element after another element

Examples related to html

Examples related to css

Examples related to css-selectors