CSS Selectors

CSS Selectors

Posted by admin at September 9, 2019

The CSS Selectors are used to select the elements and style.

There are three basic selectors of the css that are similar to the JavaScript Selectors Id , Class and Tag

All CSS Selectors are given bellow with there description

Class Selector ( . ) Selects the elements with . sign. You can define multiple classes in a element
#Selects the element with id
*Selects all elements
[ attribute ]Selects all elements with attribute name
[attribute=value]Selects all elements with attribute =”value”
[attribute~=value]Selects all elements with a attribute containing the word “value”
[attribute|=value]Selects all elements with attribute starting with “value”
[attribute^=value]Selects every element whose attribute value begins with “value”
[attribute$=value]Selects every element whose attribute value ends with “value”
[attribute*=value] Selects every element whose attribute value contains the substring “value”
:activeSelects the active link
::afterInsert something after the content of each selected element
::beforeInsert something before the content of each selected element
:checkedSelects every checked element
:defaultSelects the default element
:disabledSelects every disabled element
:empty Selects every element that has no children (including text nodes)
:enabledSelects every enabled element
:first-child Selects every element that is the first child of its parent
::first-letterSelects the first letter of every selected element
::first-lineSelects the first line of every selected element
:first-of-type Selects every selected element that is the first element of its parent
:focusSelects the selected element which has focus
:hoverSelects elements on mouse over
:in-rangeSelects elements with a value within a specified range
:indeterminateSelects elements that are in an indeterminate state
:invalidSelects all elements with an invalid value
:lang(language) Selects every element with a lang attribute equal to “value” (Italian)
:last-child Selects every selected element that is the last child of its parent
:last-of-type Selects every selected element that is the last <p> element of its parent
:linkSelects all unvisited links
:not(selector)Selects every element that is not a element
:nth-child(n) Selects every selected element that is the second child of its parent
:nth-last-child(n) Selects every selected element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) Selects every selected element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) Selects every selected element that is the second selected element of its parent
:only-of-typeSelects every element that is the only element of its parent
:only-childSelects every element that is the only child of its parent
:optionalSelects elements with no “required” attribute
:out-of-rangeSelects elements with a value outside a specified range
::placeholderSelects elements with placeholder text
:read-onlySelects elements with the “readonly” attribute specified
:read-writeSelects elements with the “readonly” attribute NOT specified
:requiredSelects elements with the “required” attribute specified
:rootSelects the document’s root element
::selectionSelects the portion of an element that is selected by a user
:targetSelects the current active element
:validSelects all input elements with a valid value
:visitedSelects all visited links

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *