CSS sibling and child selectors 

Joined:
02/21/2009
Posts:
172

August 06, 2014 16:11:23    Last update: August 06, 2014 16:11:23
  1. Select all <li> that are descendants (children, grand children etc.) of <ul>:
    ul li { margin: 0 0 5px 0; }
    

  2. Select all <li> that are direct children of <ul>:
    ul > li { margin: 0 0 5px 0; }
    

  3. Select all <p> that immediately follow another <p>:
    p + p { font-size: smaller; }
    

  4. Select a <ul> that immediately follows an element with id "title":
    #title + ul { margin-top: 0; }
    

  5. Select all <p> that follow another </p>, not necessarily immediate sibling:
    p ~ p { font-size: smaller; }
    

Share |
| Comment  | Tags