Selectors in CSS

• CSS - Cascading Style sheets plays an important part in designing our HMTL pages and making them look good.
• In order to achieve best design in best way, one need to know how to use CSS selectors efficiently.
• In CSS we have three selectors: element, id and class selector.
• In this article we will see what each selector does and how can we make best use of these selectors.

Demo

1. Element Selector

Element selector is used when one wants to apply style to all the elements of same type. Suppose you want to apply color to all the paragraph elements, then the best selector to use is element selector "p" in this case.

In the above example, we have created few paragraph elements and applied a common look using the element selector. The element selector is specified using the name of the element to which you want to apply style like "div" or "p".

2. Class Selector
Class selector is more basic then element selector. One should use class selector where one wants to apply style or common look to certain group of elements which do not belong to same element type. We define a class using class selector. The class attribute of all the elements is set to the selector name.




In the above example, we have defined two class selectors. The class selector is declared using "." operator followed by class name. The class selectors has the same name as class attribute for elements on the page.

3. ID Selector
The ID selector is the most basic, unique and simple to use. The ID selector is used when style is to be applied to only single or unique element on the page. As ID attribute is unique across the page, this selector is used for styling single element on the page.



In the above example, we have created two paragraph elements and assigned ID attribute of both. We have used ID selector to style them differently.
We could have use element selector or class selector, if our case was to style them same. In case of styling them differently we have to use ID selector.

4. Child Selector
The child selector matches the element that is an immediate child of another element. In the child selector, greater than symbol (>) is used as the combinator. A combinator is a symbol, such as >, <, and +, which shows the relationship between two elements.



In the preceding example, the p element is the immediate child of div element and as well as h1 element. The CSS rule is applied to all the p elements that are immediate children of div element.

5. Descendant Selector
The descendant selector matches the element that is a descendant of another element. A descendant element is an element that is nested inside another element. In case of descendant selector white space is used as the combinator. The descendant selector does not effect the immediate child but also considers the inner most hierarchy while applying rule (i.e. element inside an element.).

In the preceding example, CSS rule is applied to all span elements nested inside the div element.

6. Adjacent Sibling Selector
The adjacent sibling selector selects all the elements that are adjacent siblings of a specified element. Siblings elements must have the same parent element. The word adjacent means side-by-side, so no other element could exist between the adjacent sibling elements. To use an adjacent sibling selector, the plus symbol (+) is used as its combinator.


In the preceding example, the first paragraph element matches the adjacent sibling selector, h4 + p, because the first paragraph element is the adjacent element to the h4 element. The second paragraph element does not match with the selector. Although the second paragraph element is sibling of h4 element it is not adjacent to the element.

7. Attribute Selector
The CSS attribute selector selects elements on the basis of some specific attributes or attibute values. There are four categories under Attribute selector:
a. Hyphen Selector: Matches if the element has an attribute with a value followed by a hyphen.

b. Existence Selector: Matches if the element has a specific attribute. 
c. Equality Selector: Matches if the elements has an attribute with a specific value.
d. Space Selector: Matches if the element has an attribute with space separated items that match with the value.




8. Query Selector: 
The querySelector() and querySelectorAll() methods accept CSS selectors as parameters and return the matching element node in the document tree. The querySelector() method helps in querying the entire document or a specific element of the document. If multiple elemets are available, CSS selectors return the first matching element; or returns null, if no element is available. The querySelectorAll() method returns all the available elements as a singe static collection of elements known as staticNodeList. This collection of elements is not affected by any change made in the document tree, for instance removing or inserting a node does not affect staticNodeList.