Hey I recently posted this article at @designtheway but wanted to share a short version with my fellow Codepen members.

Its about Css selectors.

According to you which ones are most important css selectors every developer should know?

I have listed my top 20 css selectors apart from the basic ones.

1. A + B div + span{ color:orange; }

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

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.

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

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

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.

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.

6. A:required input:required{ border:1px solid blue; }

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

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 selector works.

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

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.

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

This is a useful selector when you want to style the current active target element.

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.

12. A::text related pseudo elements

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

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

13. A:first-child li:first-child{ font-weight:bold; }

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.

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.

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.

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.

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.

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.

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.

Have I missed any important selectors here that you know and use? Do share your opinion.


502 0 0