Freshly Pressed

If you have ever worked with CSS before, you would already know the basic selectors that are available. But there are many more that you may not be aware of as yet.

Here are a few that may spike your interest.

An ADJACENT SELECTOR

ul + p { color: #cccccc; }

This will only apply to the selector that is preceded by the former. In this example only a paragraph that is preceded by a ‘ul’ will show a color using #cccccc

A SIBLING COMBINATOR

ul ~ p { color: #cccccc; }

Whereas the adjacent selector above only applies to the immediate preceding selector, this selector combination applies to any that follow the first selector.

An ATTRIBUTES SELECTOR

a[title] { color: #cccccc; }

The attributes selector can be a very handy addition to your CSS development, as it will only apply to the attribute given, as in this example, only those anchors with a title applied.

The HREF SELECTOR

a[href="http://freshlypressed.net] { color: #ffffff; }

In addition to the attributes selector, the href selector allows for href’s to be individuallly styled. The styling will only apply to this particular link and will not affect any others.

Adding a CARAT SYMBOL to style external links

a[href^="http"] { background: #ffffff url(external-icon.png) no-repeat; padding:5px; }

This is great. in this example, only external links are styled.

These are just a few examples of how the new selectors operate. For a more much more detailed overview and more examples, take a look at the article at http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Related Posts:

No related posts found!

Tags: css > selectors
Tiny Url for this post:

Children are like wet cement. Whatever falls on them makes an impression. - Dr. Haim Ginott 291