Which are the most important css selectors? Options

[Design The Way]

Hey I recently posted this article at @designtheway but wanted to share a short version with my fellow forum 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

CODE

div + span{
  color:orange;
}

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

2. A > B

CODE

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]

CODE

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

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

4. A:checked

CODE

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

CODE

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

CODE

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

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

7. A:valid

CODE

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

CODE

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

:invalid selector works exactly opposite of how :valid selector works.

9. A:after

CODE

.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

CODE

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)

CODE

.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

CODE

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

CODE

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

CODE

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()

CODE

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()

CODE

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()

CODE

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()

CODE

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()

CODE

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()

CODE

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.