CSS Selectors

A Selector is a pattern that is used to select an element to apply the CSS style rules. Selectors can be used as a condition or a CSS rule to determine the elements that match with the selector.

The CSS rule is divided into two parts:

• selectors
• declaration

The declaration is a part that appears within the braces of the CSS rule followed by the selector. the rules defined in the declaration part are applied to the elements specified by selector.

There are the different type of selectors:

The universal selector: 

                                     The universal selector selects all the elements that are present in an HTML document. You can use this selector to apply the same rule to all the elements of an HTML or XHTML documents.
 

The universal selector is represented by an asterisk (*) symbol like: *{}

For example:

*{

margin:0;

padding:0;

}

Here the margin and padding properties are set to 0 for all elements in HTML or XHTML document on which the css rule is applied.

The Type Selector:  

                                The type selector matches all the elements specified in a list with the given value to determine the elements to which the CSS rules are to be applied .

For example:

h1, h2, h3, p{font-family:sans-serif;}

Here we have specified the font family property for the different heading elements(h1, h2, h3) and for the paragraph elements (p).

The Class Selector: 

                               The class selector allows you to apply CSS rules to the elements that carry a class attribute whose value matches with class attribute specified in the class selector.

For example:<h1 class="intro">Header 1</h1>

You can use the class selector in either two ways:

• Applying the CSS rules to all the elements that have the class attribute of the same value. like:

.intro{font-family:sans-serif;}

In the preceding code  a period is followed by a value. the value is followed by braces, which embed the CSS rule within it. The CSS rule is applied to all having the class attributes with intro as its value. 

• Applying the CSS rule to h1 element, whose class attribute contains intro as its value.

h1.intro{font-family:sans-serif;}

The ID Selector:

                           The value of the ID attribute is unique within a document, the selector is applied only to the content of one element.

like:

<h1 id="myheader">Hello world</h1>

the following code shows the id selector , which represented by a hash symbol (#) and followed by the value of id attribute:

#myheader{font-family:sans serif;}

The Child Selector:

                                  The child selector matches the element that is an immediate child of another element. in child selector, greater than symbol (>) is used as the combinator.

TD>b{font-family:sans serif;}

A combinator is a symbol such as >, < and +, which shows the relationship between two elements.

the B element is the immediate child of the TD element. the CSS rule is applied to all the B elements that are immediate children of TD elements.

The Descendant Selector:

                                           The Descendant selector matches an element that is a descendant of another element. A descendant element is an element that is nested inside another element.

table b{font-family:sans-serif;}

The Adjacent Sibling Selector:

                                                  The adjacent sibling selector selects all elements that are adjacent siblings of a specified element. sibling 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.

h2+p{font-family:sans-serif;}

The Attribute Selector: 

                                       The CSS attribute selector elements on the basis of some specific attributes or attribute value.

The Query Selector: 

                                  The querySelector() and querySelectorAll() methods accept CSS selector as parameters and return the matching element node the document tree. The querySelector() method helps in querying the entire document or a specific element of the document. you can use all the CSS selectors with this method as parameters. If multiple element are available, CSS selectors return the first matching element, or return null, if no element is available. the querySelectorAll() method return all the available elements as a single static collection of elements known as staticNodeList. the collection of elements not affected by any change made in the document tree for instance removing or inserting a node does not affect staticNodeList.