### 12.X[href^="http"]

Ever wonder how some websites are able to display a little icon next to the links which are external? I'm sure you've seen these before; they're nice reminders that the link will direct you to an entirely different website.

This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above.

Notice that we're not searching for https://; that's unnecessary, and doesn't account for the URLs that begin with https://.

Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let's search for the end of the string.

### 14.X[data-*="foo"]

How do we compensate for all of the various image types? Well, we could create multiple selectors, such as:

But that's a pain, and it's inefficient. Another possible solution is to use custom attributes. What if we added our own data-filetype attribute to each anchor that links to an image?

Then, with that hook in place, we can use a standard attributes selector to target only those anchors.

### 15.X[foo~="bar"]

Here's a special one that'll impress your friends. Not too many people know about this trick. The tilde (~) symbol allows us to target an attribute which has a space-separated list of values.

Going along with our custom attribute from number 15, above, we could create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we'll make note of external links and links to images—just for the example.

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

Pretty nifty, huh?

## Pseudo Selectors

### 16.X:visited and X:link

We use the :link pseudo-class to target all anchor tags which have yet to be clicked on.

Alternatively, we also have the :visited pseudo class, which, as you'd expect, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or "visited".

### 17.X:checked

This pseudo class will only target a user interface element that has been checked—like a radio button or checkbox. It's as simple as that.

### 18.X:after

The before and after pseudo classes are great. Every day, it seems, people are finding new and creative ways to use them effectively. They simply generate content around the selected element.

Many were first introduced to these classes when they encountered the clear-fix hack.

This hack uses the :after pseudo class to append a space after the element, and then clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible.

For another creative use of this, refer to my quick tip on creating shadows.

According to the CSS3 Selectors specification, you should technically use the pseudo element syntax of two colons ::. However, to remain compatible, the user-agent will accept a single colon usage as well.

### 19.X:hover

Oh come on. You know this one. The official term for this is "user action pseudo class". It sounds confusing, but it really isn't. Want to apply specific styling when a user hovers over an element? This will get the job done!

Keep in mind that older versions of Internet Explorer don't respond when the :hover pseudo class is applied to anything other than an anchor tag.

You'll most often use this selector when applying, for example, a border-bottom to anchor tags, when hovered over.

Pro-tipborder-bottom: 1px solid black; looks better than text-decoration: underline;.

### 20.X:not(selector)

The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly.

Or, if I wanted to select every single element (not advised) except for paragraph tags, we could do:

### 21.X::pseudoElement

We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line or the first letter. Keep in mind that these must be applied to block-level elements in order to take effect.

A pseudo-element is composed of two colons: ::

#### Target the First Letter of a Paragraph

This snippet is an abstraction that will find all paragraphs on the page, and then sub-target only the first letter of that element.

This is most often used to create newspaper-like styling for the first letter of an article.

#### Target the First Line of a Paragraph

Similarly, the ::first-line pseudo element will, as expected, style the first line of the element only.

"For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line:first-letter:before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification."—W3C Selectors Specs

## Nth Child and Type Selectors

### 22.X:nth-child(n)

Remember the days when we had no way to target specific elements in a stack? The nth-child pseudo class solves that!

Please note that nth-child accepts an integer as a parameter, but this is not zero-based. If you wish to target the second list item, use li:nth-child(2).

We can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.

### 23.X:nth-last-child(n)

What if you had a huge list of items in a ul, and you only needed to access, say, the third to last item? Rather than doing li:nth-child(397), you could instead use the nth-last-child pseudo class.

This technique works almost identically to number 16 above. The difference is that it begins at the end of the collection, and works its way back.

### 24.X:nth-of-type(n)

There will be times when, rather than selecting a child, you instead need to select according to the type of element.

Imagine markup that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.

### 25.X:nth-last-of-type(n)

And yes, to remain consistent, we can also use nth-last-of-type to begin at the end of the selectors list and work our way back to target the desired element.

### 26.X:first-child

This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this to remove borders from the first and last list items.

For example, let's say you have a list of rows, and each one has a border-top and a border-bottom. Well, with that arrangement, the first and last item in that set will look a bit odd.

Many designers apply classes of first and last to compensate for this. Instead, you can use these pseudo classes.

### 27.X:last-child

The opposite of first-childlast-child will target the last item of the element's parent.

#### last-child Selector Example

Let's build a simple example to demonstrate one possible use of these classes. We'll create a styled list item.

For the markup, there's nothing special: just a simple list.

Here's the CSS:

This styling will set a background, remove the browser default padding on the ul, and apply borders to each li to provide a bit of depth.

To add depth to your lists, apply a border-bottom to each li that is a shade or two darker than the li's background color. Next, apply a border-top which is a couple of shades lighter.

The only problem, as shown in the image above, is that a border will be applied to the very top and bottom of the unordered list—which looks odd. Let's use the :first-child and :last-child pseudo classes to fix this.

There we go; that fixes it!

### 28.X:only-child

Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it.

It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored red.

Let's assume the following markup.

In this case, the second div's paragraphs will not be targeted; only the first div. As soon as you apply more than one child to an element, the only-child pseudo class ceases to take effect.

### 29.X:only-of-type

This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container. As an example, let's target all uls which have only a single list item.

First, ask yourself how you would accomplish this task. You could do ul li, but this would target all list items. The only solution is to use only-of-type.

### 30.X:first-of-type

The first-of-type pseudo class allows you to select the first siblings of its type.

#### A Test

To better understand this, let's have a test. Copy the following markup into your code editor:

Now, without reading further, try to figure out how to target only "List Item 2". When you've figured it out (or given up), read on.

#### Solution 1

There are a variety of ways to solve this test. We'll review a handful of them. Let's begin by using first-of-type.

This snippet essentially says, to find the first unordered list on the page, then find only the immediate children, which are list items. Next, filter that down to only the second list item in that set.

#### Solution 2

Another option is to use the adjacent selector.

In this scenario, we find the ul that immediately proceeds the p tag, and then find the very last child of the element.

#### Solution 3

We can be as obnoxious or as playful as we want with these selectors.

This time, we grab the first ul on the page, and then find the very first list item, but starting from the bottom!

## Conclusion

If you're compensating for older browsers, like Internet Explorer 6, you still need to be careful when using these newer selectors. But please don't let that deter you from learning these. You'd be doing a huge disservice to yourself. Be sure to refer here for a browser-compatibility list. Alternatively, you can use Dean Edward's excellent IE9.js script to bring support for these selectors to older browsers.

Secondly, when working with JavaScript libraries, like the popular jQuery, always try to use these native CSS3 selectors over the library's custom methods/selectors, when possible. It'll make your code faster, as the selector engine can use the browser's native parsing, rather than its own.

It’s great that you’re spending time learning web design fundamentals, but if you need a quick solution, one of our ready-to-use CSS templates might be a good option. We also have a few premium CSS items for you to consider.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.