css3 selectors

css3 selectors

In this articles we are going to discuss css3 selectors.  Consider following code snippet.

<ul>

     <li id="myID" class= 'myClass'>item 1</li>

     <li class="myclass">item 2</li>

     <li>item 3</li>

</ul>

We can select elements with three types of element selectors.

#myID         /* Using ID */
.myClass      /* Using class name */
li           /* Using tag name */

Relational Selectors

Suppose following selector.

This is called descendant selector

ol li

The above expression means any il is descendant of ol and it matches any nested li’s.

ol > li

Here > sign matches child selector.  This will match li in ol.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
   <ul>
      <li>Item a</li>
      <li>Item b</li>
      <li>Item c</li>
   </ul>

<li>Item 4</li>
<li>Item 5</li>
<li>Item 5</li>

</li>

Now > sign  will match item 1, item 2, item 3, item 4, item 5 but not item a, item b, item c.

li.myClass + li

the above expression will match any  li element with class myClass and it matches any element after it if that element is an li.  (Also know as adjacent sibling)

Suppose in code example above item 4 has class .myClass. then it will match item 4 and item5 after it.

li.myClass ~ li

Suppose item 4 have class .myClass The expression above will match item 5, item 6, item 7 but not item 4.

So thats it for this article we will see more advanced CSS3 features in articles coming later in the series.

Good bye and please post your comments.