• September 21, 2016
  • Posted by: Renee Rodriguez
  • Category: Web Development
No Comments

As a front end developer, there can be a lot that is needed to be remembered. With all the different computer languages out and coming out, we always need to stay on top of the game. All developers should consider updating themselves and making their work better. Here are some CSS Selectors that you may not be aware of.

1. A + B

This is a simple selector that helps you select only the elements placed immediately after (not inside) the first element.

2. A > B

This is the child selector. It selects all elements that are direct children of a specified element.

3. A[attribute]

This is an attribute selector, this selects elements with a specific attribute.

4. A:checked

A CSS3 pseudo class that only targets elements that are checked. Keep in mind, it only works with radio buttons and checkboxes.

5. A:disabled

Another CSS3 pseudo class, this selector only targets every disabled element. This too affects only radio buttons and checkboxes, ultimately, this would only affect the default state of those selectors.

6. A:required

This selector only affects elements which are marked as required in forms.

7. A:valid

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

8. A:invalid

This selector is the exact opposite of :valid. It selects elements those doesn’t validated valid as per its element settings.

9. A:after

the :after and :before pseudo classes are very useful when you want to add some content after or before an element. Some of the most common uses for these selectors are clearfixs and using quotes in blockquotes.

10. A:target

This pseudo class is used with IDs and it only works when # tag in the URL matches with the ID of an element.

11. A:not(selector)

:not(selector) targets every element which doesn’t match the specified element/selector. It is useful when you want to target all element except one particular element.

12. A::text related pseudo elements

This is for ::first-line and ::first-letter pseudo elements. ::first-line selects the first line of a specified element, whereas ::first-letter selects the first letter in the text of the element. These selectors can only be used with block-level elements.

13. A:first-child

This selector allows you to select the first element of its parents. This is very useful when you want to style the first item in a list.

14. A:last-child

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

15. A:nth-child()

:Nth-child selector allows you to select one or multiple elements of any type of its parent.

16. A:nth-of-type()

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

17. A:first-of-type()

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

18. A:last-of-type()

Similar to :first-of-type, :last-of-type selects the last elements of a particular type of its parents.

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

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

20. A:nth-last-child()

This is similar to :nth-child but it starts counting from the last child.

For demos and examples of all these selectors, be sure to take a look at this article.