CSS

CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise

CSS3

CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS Selectors

List of CSS Selectors

.class Selector in CSS
The .class selector is used to select elements with a specific class attribute.
#id Selector in CSS
The #id selector is used to style the element with the specified id.
* Selector in CSS
The * selector is used to select all elements. It can also be used to select all elements inside another element.
element Selector in CSS
The element selector is used to select all elements with the specified element name.
element.class Selector in CSS
The element.class selector is used for selecting the specified element with the specified class.
element,element Selector in CSS
For styling multiple elements with the same style we have to separate each element name with a comma.
element element Selector in CSS
The element element selector is used for selecting elements inside elements.
element>element Selector in CSS
The element>element selector is used for selecting elements with a specific parent. Those elements which are not a direct children of the specified parent will not be selected.
element+element Selector in CSS
The element+element selector is used for selecting an element that is directly after another specific element.
element1~element2 Selector in CSS
The element1~element2 selector is used to match the occurrence of element2 that is preceded by element1. Both should have the same parent.
[attribute] Selector in CSS
The [attribute] selector is used for selecting elements with the specific attribute.
[attribute=value] Selector in CSS
The [attribute=value] selector is used for selecting elements with the specified attribute and value.
[attribute~=value] Selector in CSS
The [attribute~=value] selector is used for selecting elements with an attribute value containing a specified word.
[attribute|=value] Selector in CSS
The [attribute|=value] selector is used for selecting elements with the specific attribute starting with the specific value.
[attribute^=value] Selector in CSS
The [attribute^=value] selector is used to match every element whose attribute value begins with a specific value.
[attribute$=value] Selector in CSS
The [attribute$=value] selector is used to match every element whose attribute value ends with a specific value.
[attribute*=value] Selector in CSS
The [attribute*=value] selector is used to match every element whose attribute value containing a specific value.
:active Selector in CSS
A link becomes active when we click on it. The :active selector is used to select and style such types of links.
::after Selector in CSS
The ::after selector is used to inserting something after the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
::before Selector in CSS
The ::before selector is used to insert something before the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
:checked Selector in CSS
The :checked selector is used to match every checked input element i.e, radio buttons, checkboxes, and option elements.
:default Selector in CSS
The :default selector is used to selecting the default form element in a group of related elements.
:disabled Selector in CSS
The :disabled selector is used to match every disabled element. It is mostly used on form elements.
:empty Selector in CSS
The :empty selector is used to matching every element which has no children including text nodes.
:enabled Selector in CSS
The :enabled selector is used to match every enabled element. It is mostly used on form elements.
:first-child Selector in CSS
The :first-child selector is used to select the specified selector if and only if it is the first child of its parent.
::first-letter Selector in CSS
The ::first-letter selector is used to adding a style to the first letter of the specified selector.
::first-line Selector in CSS
The ::first-line selector is used to adding a style to the first line of the specified selector.
:first-of-type Selector in CSS
The :first-of-type selector is used to match every element that is the first child of the particular type of its parent. It is very much similar to the nth-of-type().
:focus Selector in CSS
The :focus selector is used to select the element that has focus. It is that element that accept user inputs or keyboard events.
:fullscreen Selector in CSS
The :fullscreen selector is used to select elements in full-screen mode.
:hover Selector in CSS
The :hover selector is used to select elements when we mouse over them. This selector can be used on all elements.
:in-range Selector in CSS
The :in-range selector is used to select all elements with a value within a specified range. It is used for input elements with min and/or max attributes.
:indeterminate Selector in CSS
The :indeterminate selector is used to select form elements that are in an indeterminate state. It is used on input type=checkbox, input type=radio, and progress elements.
:invalid Selector in CSS
The :invalid selector is used to select form elements with a value that does not validate according to the element default settings.
:lang Selector in CSS
The :lang() selector is used to select element with a lang attribute with the specified value.
:last-child Selector in CSS
The :last-child selector is used to match every element that is the last child of its parent. It is similar to nth-last-child(1).
:last-of-type Selector in CSS
The :last-of-type selector is used to match every element that is the last child of a particular type of its parent. It is very much similar to nth-last-of-type(1).
:link Selector in CSS
The :link selector is used to select and style the unvisited links. It is not used for those links which are already been visited.
::marker Selector in CSS
The ::marker selector is used to select and style the marker of a list item. It works on list items in ordered lists and unordered lists.
:not Selector in CSS
The :not(selector) selector is used to match every element that is NOT the specified element or selector.
:nth-child() Selector in CSS
The :nth-child(n) selector is used to match every element that is the nth child of its parent. We can say that n can be a number, a keyword or a formula like an + b.
:nth-last-child() Selector in CSS
The :nth-last-child(n) selector is used to match every element that is the nth child of its parent counting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-last-of-type() Selector in CSS
The :nth-last-of-type(n) selector is used to match every element that is the nth child of a particular type of its parent starting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-of-type() Selector in CSS
The :nth-of-type(n) selector is used to match every element that is the nth child of the same type of its parent. We can say that n can be a number, a keyword, or a formula.
:only-of-type Selector in CSS
The :only-of-type selector is used to match every element that is the only child of its type of its parent.
:only-child Selector in CSS
The :only-child selector is used to match every element that is the only child of its parent.
:optional Selector in CSS
The :optional selector is used to select form elements that are optional. Those elements are called optional which do not have the required attribute. It is only applicable on input, select, and textarea elements.
:out-of-range Selector in CSS
The :out-of-range selector is used to select all elements with a value that is outside a specified range. It is usable for input elements with min or max attributes.
::placeholder Selector in CSS
The ::placeholder selector is used to select form elements with placeholder text and allows us to style the placeholder text.
:read-only Selector in CSS
The :read-only selector is used to select elements that are readonly. Forms having readonly attribute are defined as readonly.
:read-write Selector in CSS
The :read-write selector is used to select form elements that are readable and writeable. Form elements having no readonly and disabled attributes are defined as read-able and write-able.
:required Selector in CSS
The :required selector is used to select form elements that are required. Form elements having required attributes are said to be required. It is applicable to input, select, and textarea elements.
:root Selector in CSS
The :root selector is used to match the document root element. In an HTML document, html element is always the root.
::selection Selector in CSS
The ::selection selector is used to match the portion of an element that is selected by a user.
:target Selector in CSS
The :target selector is used to style the currently active target element.
:valid Selector in CSS
The :valid selector is used to select form elements with a value that validates according to the element default settings.
:visited Selector in CSS
The :visited selector is used to select visited links. This selector can be used on all elements.