Some CSS3 Pseudo Selectors You Should Know

css3 pseudo selectors Some CSS3 Pseudo Selectors You Should Know

CSS3 provides many powerful pseudo selectors to help designers select and style complex elements of web page. In this article we will consider some CSS3 pseudo selectors of them.

:only-child

This pseudo selector matches an element if it’s the only child element of its parent. For example, the p element in the following code is matched:

p:only-child {background: red}

<div id=”content”>
    <p>This is a paragraph.</p>
</div>

This pseudo selector is supported in Firefox 3.0+, Safari 3.1+, Opera 9.5+, Chrome 2.0+ and IE 9.0.

:nth-child and :nth-last-child

The :nth-child matches elements on the basis of their positions within a parent element’s list of child elements. The :nth-last-child does the same job, but it counts from the last element backward.

Both these pseudo selectors accepts expression in their rules which can be in format An+B, where A and B are integers (positive or negative).

For example the following selector will match odd-numbered table rows:

tr:nth-child(2n+1) {background: #eee}

You can use ‘odd’, ‘even’ as it’s arguments with the same effect:

tr:nth-child(odd) {background: #eee}
tr:nth-child(even) {background: white}

The following selector will match all marked elements:

p:nth-last-child(n+2) {background: yellow}

<div>
   <p>This element is matched</p>
   <p>This element is matched</p>
   <p>This element is matched</p>
   <p>This element is NOT matched</p>
</div>

For better understanding how to calculate positions of elements, you should read this article at SitePoint and see more examples at CSS3.info.

These pseudo classes are supported in Firefox 3.5+, Safari 3.1+, Opera 9.5+, Chrome 2.0+ and IE 9.0.

:nth-of-type and :nth-last-of-type

These pseudo selectors match elements on the basis of their positions within a parent element’s list of child elements of the same type. They work the same as :nth-child and :nth-last-child but count only the elements of the same type.

For example, this rule will the odd-numbered image elements:

img:nth-of-type(odd) {border: 1px solid #ccc; padding: 5px}

These pseudo classes are supported in Firefox 3.5+, Safari 3.1+, Opera 9.5+, Chrome 2.0+ and IE 9.0.

:first-of-type, :last-of-type and :only-of-type

These pseudo selectors match an element with specified type. The :first-of-type matches the element if it’s the first child, the :last-of-type matches the element if it’s the last child and the :only-of-type matches the element if it’s the only child of its type.

For example, the img element in the following code is matched:

img:only-of-type {border: 1px solid black}

<div>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <img src=”pic.jpg” />
</div>

This selector matches the first p element that’s a child of a div element:

div p:first-of-type {font-size: 14px}

The :first-of-type is equivalent to :nth-of-type(1), the :last-of-type is equivalent to :nth-last-of-type(1).

These pseudo classes are supported in Firefox 3.5+, Safari 3.1+, Opera 9.5+, Chrome 2.0+ and IE 9.0.

:not()

This pseudo-class accepts argument which can be any simple selector, but cannot contain either the negation pseudo-class or a pseudo-element. This pseudo-class matches elements that aren’t matched by the specified selector.

For example, the selector p:not(#dec) matches all paragraph elements, except the paragraph element with id=”dec”.

This pseudo-class is supported in Firefox 1.0+, Safari 1.3+, Opera 9.5+, Chrome 2.0+ and IE 9.0.

These are some not very popular CSS3 pseudo classes, but they’re very useful for designers to decorate web page’s elements. With the coming version 9.0 of Internet Explorer, all of these pseudo classes will be supported in all modern browsers soon. CSS3 is awesome!

Posted in: CSS

2 Comments

Leave a Reply