CSS selectors

                             

                              CASCADING STYLE SHEET

CSS Selectors:

In CSS we can use the different selectors to select a HTML element for applying styles. There are various different way to select the elements that are called as selectors. They are given below.

Class (class selectors): We can select the particular element using the class. The class name have the prefix of (.) dot symbol. We can give the class name for the common elements. This selector is called as class selectors.

Syntax: .classname{/*properties and values*/}

Eg: .myFirstClassName{font-size: 30px;} Live Example click here.

ID (id selectors): The Id name is used to apply the style for the unique element. Each ID name is unique and each classname are common. ID names are specify with (#) symbol. This selector is called as id selecotors

Syntax: #idname{/*properties and values*/} 

Eg: #myIdName{font-size: 30px;}Live Example click here.

* selector (universal selectors): This selector is used select all the elements in the document. This selector is called as universal selector

Syntax: *{/*properties and values*/}  

Eg: *{font-size: 30px;} Live Example click here.

Element (type selectors): we can give the some styles for the particular elements also like div or span etc., we can give the multiple elements seperated by (,) comma. This selector is called as type selector.

Syntax:  htmlelement{/*properties and values*/} or firsthtmlelement,secondhtmlelement{/*properties and values*/}

Eg1: div{font-size: 30px;} Live Example click here.

Eg2: div,span{font-size: 30px;} Live Example click here.

Element Element(decendant selector): If the multiple elements seperated by "space" then it means it selects the element inside the next element. i.e., child of its element. See example below to have the clear understanding. This selector is called as "decendant selector".

Syntax: firstelement secondelement {/*properties and values*/}

Eg: div span{font-size: 30px;} Live Example click here. While using the "comma" separator it selects all the element in the HTML document. In these example the CSS looks for the span element inside the div element. 

Element > Element (child combinator selector): It selects all the second element which parent the first element. This selector is called as "child combinator selector".

Syntax: firstelement > secondelement{/*properties and values*/} 

Eg: div > span {font-size: 30px;} Live Example click here. which means the CSS search for the element span which has the parent as div.

Element + Element (adjacent sibling selector): This selector is used to selects the element which is directly after another specific element i.e., immediately next to the element. This selector is called as adjacent sibling selector.

Syntax: firstelement + secondelement{/*properties and values*/} 

Eg: div + span {font-size: 30px;}Live Example click here. which means the CSS search for the span element wich is next to the div element.

Element ~ Element (General sibling selector) : This selector is same as the adjacent sibling selector the only difference is adjacent sibling selector can apply styles only first next to the element. But, general sibling selector does not search for the immediate next it applies all the element which next to the specific element. This selector is called as general sibling selector.

Syntax: firstelement ~ secondelement {/*properties and values*/} 

Eg: div ~ span{font-size: 30px;}Live Example click here.

[attr] (attribute selectors): This selector search for the element which has the attribute we given. 

Syntax: element[attributename] {/*properties and values*/}

Eg: div[value] {font-size: 30px}Live Example click here. In here the CSS search for the div element which has the attribute name as "value".

[attr = val]: This selector search for the element that has the attribute name and value as equal.

Syntax: element[attributename = value] {/*properties and values*/}

Eg: div[value = new] {font-size: 30px}Live Example click here. In here the CSS search for the div element which has the attribute name and value as equal to the selector.

[attr ~= val]: This selector selects the element which has the same word of the value. i.e., it selects whether the value found in the attribute value

Syntax: element[attributename ~= value] {/*properties and values*/}

Eg: div[value ~= new] {font-size: 30px;}Live Example click here. In here CSS search for the element which has the attribute name as "value" and the value which has the word as "new".

[attr |= val]: This selector selects the element starting with the given value immediately followed by (-).

Syntax: element[attributename |= value] {/*properties and values*/}

Eg: div[value |= new] {font-size: 30px;}Live Example click here.

:link (link pseudo class): This selector applies the given property to the hyperlink that not visited in the document. The browser automatically applies the colors for the link we can override that using this CSS selectors

Syntax: :link{/*properties and values*/};

Eg: :link{color: yellow}; Live Example click here.

:visited (link pseudo class): This selector applies the properties to the hyperlink that visited already.

Syntax: :visited{/*properties and values*/};

Eg: :visited{color: blue}; Live Example click here.

:hover (dynamic pseudo class): This selector applies the property only when the mouse hover to that element.

Syntax: element:hover{/*properties and values*/};

Eg: div:hover{background-color: red}; Live Example click here.

:active(dynamic pseudo class): This selector selects the active link.

Syntax: :active {/*properties and values*/}

Eg: :active{color: red} Live Example click here.

:focus (dynamic pseudo class): This selector selects the input element that has focus or the other elements which has the focus.

Syntax: element:focus{/*properties and values*/} 

Eg: input:focus{border-color: red} Live Example click here.

:first-line: This applies the style for the first line of the given element. Its also one of the pseudo class.

Syntax: element:first-line{/*properties and values*/}

Eg: div:first-line{color: red}; Live Example click here.

:first-letter: This selector applies the style to the first letter of the given element. It also one of the pseudo class.

Syntax: element:first-letter{/*properties and values*/}

Eg: div:first-letter{font-size: 30px;} Live Example click here.

:first-child: This selectors applies style to the element which has the first child to their parent. It also one of the pseudo class.

Syntax: element:first-child{/*properties and values*/} 

Eg: span:first-child{font-size: 20px;} Live Example click here.

:before: This selector is used to insert the generated content before to the given element.

Syntax: element:before{/*properties and values*/} 

Eg: div:before{content: "hai"} Live Example click here.

:after: This selector is used to insert the generated content after the given element.

Syntax: element:after{/*properties and values*/} 

Eg: div:after{content: "hai"} Live Example click here.

:first-of-type: This selector applies style for the element that is the first parent in the document.

Syntax: element:first-of-type{/*properties and values*/}

Eg: div:first-of-type{font-size: 15px;} 

:only-child: This selector search for the given element is child to the other element. 

Syntax: element:only-child{/*properties and values*/} 

Eg: span:only-child{font-size: 20px;} Live Example click here.

:last-child: This selector search for the give element is the last child to the element. 

Syntax: element:last-child{/*properties and values*/}

Eg: span:last-child{font-size: 20px;} Live Example click here.

:empty: This selector select the elements which is empty.

Syntax: element:empty{/*properties and values*/}

Eg: div:empty{color: red;} Live Example click here.

:enabled: This selector applies the style for the input element which is enabled.

Syntax: element:enabled{/*properties and values*/}

Eg: input:enabled{border-color: red} Live Example click here.

:disabled: This selector applies the style for the input element which is disabled.

Syntax: element:disabled{/*properties and values*/}

Eg: input:disabled{border-color: red} Live Example click here.

:not: This selector selects all other element with out the given element in not. 

Syntax: :not(element) {/*properties and values*/}

Eg: div *:not(span){color: red;}Live Example click here. In here CSS search for the child element of the div which is not span. 

::selection: This is used to style the selection of text in browser. 

Syntax: element::selection{/*properties and values*/};

Eg: div::selection{color: red}; Live Example click here.

:nth-child(n): This selectors selects the elements which is the nth child of its parent.

Syntax: element:nth-child(number){/*properties and values*/};

Eg: div:nth-child(2){color:red} Live Example click here.

:nth-last-child(n): This is same as the above selector the only difference it count from the last child of the element. 

Syntax: element:nth-last-child(number) {/*properties and values*/}

Eg: div:nth-last-child(2){color:red} Live Example click here.

:nth-of-type(n): This is also same as the nth-child selector but the only difference is nth-child() selector counts the every child not the same of type i.e., it search for the element only not to its type. In nth-of-type it search also for the element type. See Difference.

Syntax: element:nth-of-type(number){/*properties and values*/}

Eg: div:nth-of-type(2){color:red} Live Example click here.

:nth-last-of-type(n): This is same as the nth-of-type the only difference is it count from the last child instead of first child.

Syntax: element:nth-last-of-type(number) {/*properties and values*/}

Eg: div:nth-last-of-type(2){color:red} Live Example click here. 

The above given are various types of CSS selector using these selector you can easily style the HTML elements and also these selectors used to coding in "Jquery" a Javascript library.