Category Archives: Coding

CSS selectors you should be using

By | Coding | No Comments

Here are a few CSS selectors that can speed up and improve your workflow.


p + span {color:blue;}

The + refers to an adjacent selector. It will only select the element that is after the first element. In the example, only the spans that are after a paragraph will the have blue text.


#container > li {border-bottom: 1px solid black;}

With the > selector you will only target the element that is a direct children of the first element. For example if we have a subnav like the following html, we are only adding a border to the elements inside the first ul.

  <ul id="container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <li>Sub item</li>


h3 ~ p {color: red;}

This is the sibling combinator. Pretty similar to + but less strict. The + only targets the first element while the ~ will select every paregraph that is after a h3.


a[title] {color:red;}

This will only select the the anchor tags with the title attribute. The anchor tags without title will skip this styling.


a[href=""] {background: url(img/google-icon.png) no-repeat;}

With this snippet we can style all anchor tags that link to google. All other anchor tags will skip this rule.


a[href*="documents"] {color: #1f6053;}

The star designates that the value must be somewhere in the attribute’s value. In the example we can give a specific color to all links that have document on it.


a[href^="http"] {background: url(path/to/external/icon.png) no-repeat; padding:10px;}

With the ^ we can target the all anchor tags that start with https. So if we have an http link we’re not gonna use that background and padding.


a[href$=".pdf"] {color:red;}

Using the $ we refer to the end of the string. So all links to pdfs will be colored red.


input[type=radio]:checked {border: 1px solid black;}

With this pseudo class we can highlight an element that has been checked like a radio button or checkbox.

:before & :after

.tags ul li:after {content:",";}

With the before and after pseudo classes we can generate content around the selected element. In my example i’m separating all elements of a list with a collon.


header div:not(.logo) {padding:20px}

The negation is really useful. We can select all elements that are not the specified one.

:first-line & :first-letter

Pretty explanatory right?

:nth-child(n) & :nth-last-child(n)

li:nth-child(2) {color:blue}
li:nth-last-child(3) {color:blue}
table tr:nth-child(2n) {background:#F4F4F4}

We have 3 examples here. The first one we’re targeting the second element of a list and coloring it red. The second one we are selecting the element that is third but counting from the bottom.

This pseudo element also selects a set of elements like the third example. We are giving a light grey background to a table row, this way we can achieve the zebra effect.

:nth-of-type(n) & :nth-last-of-type(n)

.container h2:nth-of-type(2) {border-top:1px solid #CCC;}
.container p:nth-last-of-type(1) {border-bottom:1px solid red;}
.container table(2n) {background:#f4f4f4}

This goes pretty much like the above but targeting elements by type.

:first-child & :last-child

ul li:first-child {border-top:1px solid #ccc;}
ul li:last-child {padding-bottom:10px;}

These pseudo classes allows us to target either the first or the last element.