20 CSS Selectors Every Developer Must Know

Css selectors! which ones do you know?

Do you know the most modern ones or do you just work around with id, class or some other elements, if so then you are lagging behind the modern web trends. You must consider updating your self and make most of the new css selectors (not so new now).

Here is a list of css selectors you must know and use as front end developer.

1. A + B

div + span{
  color:orange;
}

This an example of adjacent sibling selector, it’s not a selector on its own but a combination of selectors.

This will only select the elements those are placed immediately after(not inside) the first element.

Demo

Browser Support

Firefox Chrome Opera Safari IE
Any Any Any Any 7.0

Recommended Reading: Learn to create css buttons

2. A > B

div > p{
  background:#000;
  color:#fff;
}

This is called child selector, it selects all elements those are direct children of a specified element.

<div>
  <p>I am a paragraph in a div</p>
  <p>I am a paragraph in a div</p>
  <ul>
    <li><p>I am a paragraph inside li</p></li>
  </ul>
</div>

The above code says it will only select p which are a direct child of a div not any other elements.

Demo

Browser Support

Firefox Chrome Opera Safari IE
Any Any Any Any 7.0

3. A[attribute]

input[type="email"]{
  border:1px solid green;
}

This is an example of attribute selector, this selects elements with specified attribute.

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
</form>

The above code only selects email type attribute not any other attribute. This type of attribute selectors are very useful when designing forms sitewide.

List of attribute selectors.

Demo

Browser Support

Firefox Chrome Opera Safari IE
2.0 4.0 9.6 3.1 7.0

4. A:checked

input:checked + label{
  color:orange;
}

This is a css3 pseudo class, it only targets elements those are checked. Keep in mind it only works with radio buttons and checkboxes.

Demo

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

5. A:disabled

input[type="email"]:disabled {
    background: #dddddd;
}

This is a another css3 pseudo class, this selector targets every disabled element. This selector mainly used in styling forms.

Much like :disabled there is another selector opposite to it is :enabled which is basically default state and usually you don’t need to style them separately.

Demo

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

6. A:required

input:required{
  border:1px solid blue;
}

This selector selects elements which are marked as required in form.

Demo

Browser Support

Firefox Chrome Opera Safari IE
4.0 10.0 10.0 5.0 10.0

7. A:valid

input:valid{
  border:1px solid green;
}

:valid selector selects elements with validated value as per its elements settings. This works mainly with email field, input with max and min attributes or with number fields.

8. A:invalid

input:invalid{
  border:1px solid red;
}

:invalid selector works exactly opposite of how :valid selectors work, it selects elements those doesn’t validated value as per its elements settings.

Demo

Browser Support

Firefox Chrome Opera Safari IE
4.0 10.0 10.0 5.0 10.0

9. A:after

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

The :after and :before pseudo classes are very useful when you want to add some content after or before an element. I first came to know about these when I wanted to auto clear a section used the code above.

Some of the most common use of these selectors are for clearfix, using quotes in blockquotes etc. You are free to brainstorm your own creative ways to use it.

Demo

Note: For modern browsers those supports CSS3 syntax you can use :: for pseudo elements but they also support : syntax. Because IE8 only supports : its recommended you should use : for better cross browser support.

Browser Support

Firefox Chrome Opera Safari IE
3.5 2.0 6.0 1.3 8.0

10. A:target

p:target {
  background-color: #333;
  color: #fff;
}

This :target pseudo class is used with IDs and it works only when # tag in the URL matches with the ID of an element. This is a useful selector when you want to style the current active target element.

Demo

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

Recommended Reading: Biggest css button template collection

11. A:not(selector)

.entry-content :not(div){
  border:1px solid #ccc;
  color:red;
}

:not(selector) targets every element which doesn’t match the specified element/selector. Its useful when you want target all elements except one particular element. More in details here.

Demo

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

12. A::text related pseudo elements

p::first-line {
    background-color: ##2B7EE3;
}
p::first-letter {
    font-size: 1.5em;
    color: #2B7EE3;
}

Let’s check some text related pseudo elements those are ::first-line and ::first-letter.

::first-line selects the first line of the specified element.

::first-letter selects the first letter in the text of the specified element.

Note: These selectors can only be used with block-level elements.

You can combine pseudo selectors to use it effectively, like making dropcaps effects. For this you can combine :first-child and ::first-letter. Because you wouldn’t want all paragraph to begin with large letter.

Demo

Browser Support

Firefox Chrome Opera Safari IE
1.0 1.0 7.0 3.1 9.0

Note: IE 5.5-8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:first-letter). Newer versions support the standard, double-colon CSS3 syntax (::first-letter). – Source

13. A:first-child

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

The :first-child selector allow you to select the first element of its parent. This is very useful when you want to style the first item in a list.

14. A:last-child

li:last-child{
  border-bottom:none;
}

Similar to :first-child selector :last-child allow you to select the last element of its parent.

Say you have a list items with border-top and border-bottom now you want to remove border-top from first item and border-bottom from last item.

Instead of using any classes you can target the list with :first-child and :last-child selectors.

Demo

The css here says just remove border-top from the first child and border-bottom from the last child.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

15. A:nth-child()

ul li:nth-child(2n+2){
  color:green;
}

:nth-child selector allows you to select one or multiple elements of any type, of its parent. Days are gone when you can’t select an element of a list without a class or an id but you can now do that easily with proper use of :nth-child selector.

:nth-child accepts argument it can be a number or keywords like odd even or a formula. I have found this article very useful on how to calculate :nth-child, even if it’s not clear to you, you can use the following calculators.

CSS-Tricks Tester

Lea Verou’s Tester

Demo

The code basically says to select every second item in the list. You could do this with only using (2n) or keyword even instead of (2n+2) also.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

16. A:nth-of-type()

div img:nth-of-type(3n) {
  border: 1px solid red;
}

This selector works like :nth-child but it selects elements of a particular type of its parent.

Say you have a list where you have number of paragraph and a number of images, you want to target every third image in that list, here you can use :nth-of-type. To further illustrate my point see the demo

Demo

See it selects every third image inside a div. This is not possible to achieve with :nth-child.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

Recommended Reading: Create ready to use contact form with free source code

17. A:first-of-type()

p:first-of-type {
    background: green;
}

The :first-of-type selector selects the first element of a particular type of its parent.

Demo

It selects the first item of open p tags and also selects the first p inside a div because they are the same type of element.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

18. A:last-of-type()

p:last-of-type {
    background: green;
}

Similar to :first-of-type :last-of-type selects the last element of a particular type of its parent.

Demo

Here it does same but instead selects the last items.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

19. A:nth-last-of-type()

div img:nth-last-of-type(3n) {
  border: 1px solid red;
}

This work similarly as :nth-of-type only difference is that it starts counting from last child.

Demo

As you can see it does very similar work as :nth-of-type but it starts from bottom.

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

20. A:nth-last-child()

ul li:nth-last-child(2n+2){
  color:green;
}

This work similarly as :nth-child but it starts counting from last child.

Demo

Browser Support

Firefox Chrome Opera Safari IE
3.5 4.0 9.6 3.2 9.0

Conclusion

Most of the css selectors listed here are css3 selectors and you must strongly consider using these if you haven’t started using it already because having these tricks in your bag will add new dynamics to your workflow.

Caution: If you are targeting old browsers you must check the browser compatibility before using.

Have I missed any important selectors here that you know and use? Do let me know in the comment section below.

If you found this post useful don’t forget to share with your friends.

You may also like

FREE PDF: Essential wordpress plugin for your website

free-pdf
Free Download

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.