RSS

Tag Archives: selectors

CSS Selectors

Reference: http://css-tricks.com/child-and-sibling-selectors/
(but also http://www.w3.org/TR/CSS2/selector.html)

Select all the items with a “classname” class:

.classname {}

Select the (one and only) item with “objectid” id:

#objectid {}

Select all the div items with a “classname” class:

div.classname {}

Select all ‘li’ elements into .classname (at every level):

.classname li {}

EXAMPLE:
<ul>
  <li>		<==
  <li>		<==
  <ul>
    <li> 	<==
    <li>	<==
  </ul>
  <li>		<==
</ul>

Child combinator. Select children:

.classname > li {}

EXAMPLE:
<ul>
  <li>		<==
  <li>		<==
  <ul>
    <li>
    <li>
  </ul>
  <li>		<==
</ul>

Adjacent sibling combinator. Select the p right after one p:

p + p {}

EXAMPLE:

General sibling combinator. Select every ‘p‘ sibling (after, not near) of a ‘p‘:

p ~ p {}

EXAMPLE:

Pseudo selector. Select first child of .classname:

.classname:first-child {}
Advertisements
 
Leave a comment

Posted by on 2013/04/29 in dev

 

Tags: , ,