All About CSS Selectors

In Web dev programming CSS plays an vital role in the style & design of the components. With CSS we can style the HTML elements, class, id attributes.

Today we will explore the CSS selectors and how we can use them in different case scenarios.

The Basics

The CSS Selectors are the HTML elements that we will use to style those particular elements in CSS.

Types of Selectors

• Universal Selector ( * ): The Universal selector is denoted by an asterisk(*), which is a wildcard to select all the elements in the page document.
• Type Selector ( div ): The Type selector is the HTML element itself which applies CSS properties to every element of the selector.
• Class ( .text-center ): Class is the most usable CSS-selector which can allow use for a specific block & can be used at multiples.
• ID ( #id ): ID allows to specified the property with selector and can be used multiple elements.

Selector Combinators

In CSS, with different combinations, we can select the element to specify the selector.

1. Descendant ( div .a ): Select element which is descendant of the first element, i.e. if under div there is a class then it will apply to everywhere it gets to define.
2. Direct Child ( div > a ): Select elements that are the direct child of the element.
3. General Sibling ( div ~ a ): It Select elements that are siblings of the first element and come after the first element.
4. Adjacent Sibling ( div + a ): It Select elements that are siblings of the first element and come directly after the first element.
5. OR ( div, a ): Select elements that match any selector from the list.
6. AND ( div.a ) : Select elements that match all the selector combination.

Attributes

Now let’s try with the Attributes property of the elements for specificity.

• Has attribute ( [type=*] ) : Select elements that have that attribute { ex: input[type=*] }
• Exact attribute ( [type=’text’] ): Select elements that have that attribute with exactly that value { ex: input[type=’text’] }
• Begins With ( [ a^=”1” ] ): Select elements that have that attribute which start with that value.
• Ends With ( [ a$=”1” ] ) : Select elements that have that attribute which ends with that value.
• Substring ( [ a=”1” ] ) :* Select elements that have that attribute which contain that value anywhere.

Pseudo Elements

1. Before ( div::before ): Creates an empty element exactly before the children of the selected element.
2. After ( div::after ): Creates an empty element exactly after the children of the selected element.

Pseudo Class (state)

• Hover ( button:hover ) : Select Element that are hovered by the mouse.
• Focused ( button:focus) : Select Elements that are focused.
• Required (input:required) : Select Input element(s) that are required.
• Disabled ( button:disbaled) : Select Elements that has disabled .
• Checked ( input:checked) : Select checkboxes/radio buttons that are checked.

Pseudo Class ( Position )

1. First Child ( a:first-child): Select elements that are the first child inside a container.
2. Last Child ( last-child): Select elements that are the last child inside a container.
3. Nth Child ( a:nth-child(n+1) ) : Select elements that are the nth child inside a container based on formula.
4. Nth Last Child ( a:nth-last-child(n+1): Select elements that are the nth-child inside a container based on the formula counting from the end.
5. Only Child ( a:only-child ): Select elements that are the only child inside the container.
6. First of type ( a:first-of-type ): Select elements that are the first of type inside the container.
7. Last of type ( a:last-of-type ): Select elements that are the last of type inside the container.
8. Nth of type ( a:nth-of-type(n+1) ) : Select elements that are the nth of type inside the container based on the formula.
9. Only of Type ( a:only-of-type ): Select elements that are the only of a type inside the container.
10. Not ( a:not(.c) ): Select all elements that do not match the selector inside the not selector.