What is syntax for selector in CSS for next element

Question

If I have a header tag  lt h1 class  hc-reform  gt title lt  h1 gt   h1 hc-reform      float left      font-size 30px      color  0e73bb      font-weight bold      margin 10px 0px      and after that I have a paragraph  lt p gt stuff here lt  p gt    How can I ensure using CSS that every  lt p gt  tag that follows the h1 hc-reform to use  clear both   would that be   h1 hc-reform  gt  p       clear both      for some reason that s not working

User · Accepted Answer

This is called the adjacent sibling selector  and it is represented by a plus sign     h1 hc-reform   p     clear both      Note  this is not supported in IE6 or older

User · Answer

no  gt  is a child selector    the one you want is    so try h1 hc-reform   p  browser support isn t great

User · Answer

The  gt  is a child selector  So if your HTML looks like this    lt h1 class  hc-reform  gt      title      lt p gt stuff here lt  p gt   lt  h1 gt        then that s your ticket   But if your HTML looks like this    lt h1 class  hc-reform  gt      title  lt  h1 gt   lt p gt stuff here lt  p gt    Then you want the adjacent selector   h1 hc-reform   p       clear both

User · Answer

You can use the sibling selector     h1 hc-reform   p       clear both      This selects all the p elements that come after  hc-reform  not just the first one

User · Answer

Not exactly  The h1 hc-reform  gt  p means  any p exactly one level underneath h1 hc-reform    What you want is h1 hc-reform   p  Of course  that might cause some issues in older versions of Internet Explorer  if you want to make the page compatible with older IEs  you ll be stuck with either adding a class manually to the paragraphs or using some JavaScript  in jQuery  for example  you could do something like    h1 hc-reform   next  p   addClass  first-paragraph      More info  http   www w3 org TR CSS2 selector html or http   css-tricks com child-and-sibling-selectors

[html] What is syntax for selector in CSS for next element?

Examples related to html

Examples related to css

Examples related to css-selectors

Examples related to siblings