Advanced CSS Selectors all Web Designers should learn (Part 2)

Last week, I gave examples of grouping selectors, descendant selectors, child selectors and adjacent sibling selectors. You can see Part 1 of  Advanced CSS Selectors all Web Designers should learn by clicking here.

Used together, these selectors can help you select the desired elements with the minimum amount of code possible. This week, I’ll be showing examples of some more advanced techniques: Attribute Selectors and Pseudo-Classes and Elements.

Attribute Selectors

Available since CSS 2.1, this great feature allows you select an element which has a specific attribute specified. For instance, say you have:

<div class="header"></div>

There are two ways to select this div using CSS:

div.header { ... }
div[class=header] { ... }

Similarly, you can do the following:

a[href="http://www.google.com/"] { ... }

That will match all <a> links which link to Google.com.

Four ways of using the Attribute Selector:

The attribute selector can be used in four ways:

  • [attribute] – Used to match elements that have attribute set (whatever the value).
  • [attribute=value] – Used to match elements that have attribute set to value.
  • [attribute~=value] – Used to match elements in which attribute is assigned a string which includes value.
  • [attribute|=value] – Used to match elements in which attribute is assigned a string which begins with value.

Confused? No need to be; here are some examples.

Say we have the following divs:

<div id="start">Method 1</div>
<div title="header">Method 2</div>
<div title="This is the beginning of the page">Method 3</div>
<div lang="en-US">Method 4</div>

Now, with the following CSS, can you guess which elements we will select?

div[id] { color:red }
div[title=header] { color:black }
div[title~=beginning] { color:green }
div[lang|=en] { color:orange }

Can you guess what each one will select?

div[id] { color:red }
…will select the first div since it matches all divs which have id attribute set.
div[title=header] { color:black }
…will select the second div since it matches all divs which have title attribute set to header.
div[title~=beginning] { color:green }
…will select the third div since it matches all divs which have the title attribute set to a phrase which includes ‘beginning’.
div[lang|=en] { color:orange }
…will select the forth div since it matches all divs which have a lang attribute that starts with ‘en’.

Keep in mind you can use these with any of the other selectors you’ve already learned, so the following CSS selectors are all valid:

*[title] { ... }
div > ul li[title=header] { ... }
table tr td[lang|=en] { ... }
h1 + h2[title=pagesubtitle] { ... }

It is also possible to try match more than one attribute:

div[title=header][lang|=en] { ... }

I encourage you to play around with these options… there is so much you can do with them to make your life easier when styling your pages.

Pseudo Classes

The next technique I’ll be showing are Pseudo Classes. These are slightly more advanced than attribute selectors and are probably not as common.

Have you ever created CSS styles for links? If you have, then you have probably already used pseudo classes. The following CSS is a perfect example:

a:link {color:#000;}
a:visited {color:#CCC;}
a:hover {color:#000;}
a:active {color:#999;}

These are in fact the four most commonly used pseudo classes which almost any web designer uses on every project. However, there are a few more you might not be aware of:

ul > li:first-child { font-weight:bold; }

a:focus { background: blue; }

html:lang(fr) { quotes: '« ' ' »'; }

Let’s have a look at them, one by one.

The first-child Pseudo Class

This technique is used when you want to select the first child element of some other element. For instance, take the following code:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

To select just the first element, we would simply do:

ul > li:first-child { font-weight:bold; }

Easy, right?  Similarly, if we had this code:

<div>
    Hello everyone, <p>My Name is</p> <p> Marc</p>
</div>

Then using the following CSS:

div p:first-child { color: red; }

…would just make “My name is” red.

Focus Pseudo Class

This class works very similarly to the other link classes. It is activated when the element is in focus. For example, you may use this for a text field:

<input type="text" />

Use the following CSS:

input:focus { background: #CCC; }

Simple!

The Language Pseudo Class

If your website has multiple languages, this pseudo class is perfect to define styles which are specific to a certain language.

For example, say we had the following code:

<body lang="fr">
Hello my name is <q>Marc</q>
</body>

Did you know the French language uses « and » as quotes rather than ” and ” ? In order to automatically change the quotes without manually changing any of the code inside, we could simply do the following:

body:lang(fr) { quotes: '« ' ' »'; }

Can you think of another way of doing this? Of course! We can use the attribute selectors we learnt earlier. Therefore, the following  two CSS selectors will do the same thing:

body:lang(fr) { quotes: '« ' ' »'; }
body[lang=fr] { quotes: '« ' ' »'; }

Here’s the full list of Pseudo Classes that you may use:

  • :link
  • :active
  • :visited
  • :hover
  • :focus
  • :lang
  • :first-child

Now that we’ve seen the Pseudo Classes, lets move on to the Pseudo Elements.

Pseudo Elements

There are four main Pseudo Elements that you should learn:

  • :after
  • :before
  • :first-letter
  • :first-line

These selectors are used to apply special effects to certain elements. Let’s start off with :after and :before:

:after and :before

These selectors are used to add content before or after an element using CSS. Say we have the following code:

<div class="offer">$10.00</div>

Maybe we want to add the word Offer! right before that element. Easy. We can use the following CSS:

div.offer:before {content: "Offer! "}

And if we want to add a picture after that?

div.offer:after { content:url(offer.gif); }

Pretty neat, huh?

:first-letter

This one is pretty easy to understand. This selector will only apply the style to the very first letter in the element.

Maybe we want the first letter to be big in the following code:

<div id="introduction">Hello everyone!</div>

We simply need to add this CSS:

div#introduction:first-letter { font-size:30px; }

And that’s that!

:first-line

This is the last technique you’ll be seeing today. Working similarly to the :first-letter selector, this selector will select the first line and apply the style to just that line. For instance, with the following code:

<p>This is a long paragraph that I will repeat.
This is a long paragraph that I will repeat.
This is a long paragraph that I will repeat.
This is a long paragraph that I will repeat.
This is a long paragraph that I will repeat. </p>

To stylize the first line, we simply add the following CSS:

p:first-line { color: red; }

This will make the first line red. Keep in mind that the length of the first line depends on a number of factors including what browser you’re using, what resolution your monitor is set on, etc.

In Summary…

Here’s a summary of both part 1 and part 2.

Grouping Selectors:

element1, element2 { ... }

Descendant Selectors:

parentelement descendantelement { ... }

Child Selectors:

parentelement > childelement { ... }

Adjacent Sibling Selectors:

parentelement + siblingelement { ... }

Attribute Selectors:

element[attribute] { ... }
element[attribute=value] { ... }
element[attribute~=value] { ... }
element[attribute|=value] { ... }

Pseudo Classes:

element:link { ... }
element:active { ... }
element:visited { ... }
element:hover { ... }
element:focus { ... }
element:lang { ... }
element:first-child { ... }

Pseudo Elements:

element:after { ... }
element:before { ... }
element:first-letter { ... }
element:first-line { ... }

As you can see, using CSS, there are several different ways to select elements that can make your life much easier. Of course, like any other type of coding, there are many different techniques you can use to achieve the same thing. Which one you choose is completely up to you and depends on both your experience and your preferences.

I suggest you play around with all selectors to find out how they work exactly. Knowing they exist is the most important thing here as you might not use them straight away but might discover a need for them down the line.

Thanks for reading. Please leave a comment below if you have any queries or suggestions.

Don't forget to check out more posts from the Tutorial of the Week section.

blog comments powered by Disqus
.