1. a[href^=”http”]

This selector will style any link with a href attribute starting with ‘http’. This can be useful for styling external links to make it clear that users are being redirected away from your website, or for doing fancy things like adding a padlock icon to any links that point to secure pages (in this case replace the ‘http’ with ‘https’). Of course, you can change the string to whatever you want.

Example:

a[href^="http"] {
background:url(images/new-window.png) no-repeat;
padding-right:30px;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

2. h1 ~ p

The tilda(~) selector will select any element that is preceeded by the first element. This example will select any paragraph that is preceeded by a h1 tag. This could be useful if you wanted to indent paragraphs that are underneath a heading.

Example:

h1 ~ p {
text-indent:20px;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

3. p:first-line / p:first-letter

If you haven’t guessed already this selector will target the first line or first letter of any paragraph. You can use this on any element but using it with paragraphs is the most common.

Example:

p:first-line {
font-weight:bold;
}
p.fancy:first-letter {
font-size:1.8em;
font-weight:bold;
color:#333;
}

Compatible with Chrome, Firefox, IE6+, Opera, Safari

4. img[alt]

The attributes selector will only target the elements with the specified attribute. This example will add a border to any images that have an alt attribute. You could use this to manipulate images that have a title or alt attribute in order to display a caption, for example.

Example:

img[alt] {
border:1px solid #000;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

5. :before / :after

This CSS selector actually modifies the content of the page, not just the styling. You can insert content around the selected element using these selectors. In the following example the text “Error:” will be inserted before every paragraph with a class of ‘error’.

Example:

p.error:before {
content: "Error:";
}

Compatible with Chrome, Firefox, IE8+, Opera, Safari

6. a[xyz~=”abc def”]

This can look quite confusing, but all the above does is look for an attribute (xyz) on the selected element and take a space separated list of values, each of which can be styled differently.

Example:

a[my-attribute~="category"] {
font-weight:bold;
}
a[my-attribute~="product"] {
color:#cc0000;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

7. a[href*=”roundedworks”]

This selector allows you to add styling to an element whose attribute value contains the supplied string. Possible uses could be to add a little ‘G’ icon to links pointing to any google page.

Example:

a[href*="google"] {
background:url(images/google-logo-icon.png) no-repeat;
padding-right:30px;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

8. h2 + p

The adjacent select0r will select the first element that is immeadiately preceded by the former element. This is similar to number 2, but this selector is restricted to the first element only, whereas h2 ~ p would select all paragraphs preceded by a h2. The example below would the first paragraph that follows a h2 bold.

Example:

h2 + p {
font-weight:bold;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

9. a[href$=”.jpg”]

This selector searches the href attribute of a link and targets those that end with .jpg. Nice if you want to style image links or pdf links differently.

Example:

a[href$=".jpg"] {
border:1px solid #e6e7e8;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

10. ul:first-child/ul:last-child

This selector is great for removing margins and borders from the first or last element within a specified parent, in this case the unordered list.

Example:

ul:last-child {
border-bottom:0;
margin-bottom:0;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari