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.

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

~

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.

[title]

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.

[href=”http://google.com”]

a[href="http://google.com"] {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.

[href*=”documents”]

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.

[href^=”https”]

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.

[href$=”.jpg”]

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

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

:checked

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.

:not

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.