Selectors in CSS

Selectors are used to select specific elements from the DOM and then apply styles. Here is the list of important selectors.

• element - selects elements with given tag
• [title='softpost'] - select every element having title attribute value as 'softpost'
• .className - selects all elements matching class name
• #id - Selects element with given id
• .class1.class2 - select element that has both classes
• .class1 .class2 - select element with class class2 but it must be nested inside an element having class class1.
• input:valid and input:invalid - selects all input elements with valid/invalid values
• input:checked - select every checked input element
• input:disabled - select every disabled input element
• input:focus - select element that has a focus
• button:focus-within - select element that has a focus or it's descendants have focus
• :root - selects the root element. It has greater specificity than html element
• * - select all elements
• ::selection - selects the portion of an element that is selected by user