1. Ultimate Reference For CSS Properties
In this ultimate and updated CSS reference tutorial, you'll discover an extensive list of selectors vital for crafting stylish and dynamic web designs. This comprehensive selector guide covers everything from basic to advanced selectors used in CSS and CSS3 language.
2. Alphabetical Reference of CSS Selectors
Dive into the alphabetically categorized list of CSS selectors, carefully organized for easy reference. Each selector is accompanied by a brief explanation and an example, providing you with an overall understanding of its functionality and application.
| Selector | Example | Example description |
| * | * | This selector will select and apply styles to all the elements of a document. |
| + | p + h4 | This Next sibling selector selects the first <h4> element that comes immediately after <p> elements, this CSS selector combination is helpful. |
| > | div > h3 | Use this child combinator to select all <h3> elements where the parent is a <div> element, we use this type of selector combination. |
| || | .main > * || p | CSS column combinator targets direct children p of the .main element's column-based layout, ensuring styles apply only within those columns. |
| ~ | p ~ ul | This subsequent sibling combinator will select every <ul> element that is preceded by a <p> element. |
| :active | a:active | This pseudo-class applies only when the a link is being activated by the user and selects that active link. |
| ::after | h2::after | Select and insert some content after each <h3> element using this selector. |
| :any-link | a:any-link | This pseudo-class selector targets all anchor links a, regardless of whether they are visited or not. |
| [attribute] | [target] | To select all elements with a target attribute, use this selector. |
| [attribute=value] | [target="_partent"] | To select all elements with the target attribute and having value as _parent, use this CSS selector. |
| [attribute~=value] | [title~="cricket"] | This CSS selector selects all elements with a title attribute containing the word cricket. |
| [attribute|=value] | [lang|="en"] | This selector selects all elements with a lang attribute with a value equal to en or starting with en-. |
| [attribute^=value] | a[href^="http"] | Use this selector to select every <a> element whose href attribute value begins with http. |
| [attribute$=value] | img[src$=".png"] | Use this CSS selector to select every <img> element whose src attribute value ends with .png. |
| [attribute*=value] | a[href*="tutsinsider"] | This selector selects every <a> element whose href attribute value contains the substring "tutsinsider". |
| autofill | input:autofill | This pseudo-class selector targets the input elements whose values have been automatically filled in by the browser, such as usernames, passwords, or addresses in forms. |
| ::backdrop | dialog::backdrop | We can select the bottom layer of the dialog-box or modal using this CSS slector. |
| ::before | h3::before | Select and insert some content before each <h3> element using this CSS pseudo-class selector. |
| :blank | input::before | Use this pseudo-class selector to capture the input elements without visible content, including elements with only whitespace. |
| :checked | input:checked | This CSS pseudo-class selector selects every checkbox or radio <input> element that is checked. |
| .class | .main | It selects all elements with class-name main. |
| .class1.class2 | .link.main-link | Selects all elements that have both link and main-link classes together within its class attribute. e.g. <a href="/codelab" class="link main-link">Codelab</a> |
| .class1 .class2 | .name1 .name2 | This CSS selector will Select all HTML elements with class name2 whose parent element has a class name1. |
| ::cue | video::cue | We can select the subtitles or oher cues inside a video element. |
| :current or :current() | :current(p) | Use this selector to select the current p element being displayed, e.g. subtitles in a video track. |
| :default | input:default | This selector selects the default <input> element. |
| :dir() | p:dir(rtl) | Use this selector to select <p> elements with right-to-left writing direction e.g., Arabic. |
| :disabled | input:disabled | Use this selector to select every disabled <input> element. |
| element | ul | This selector selects all the ul(Unordered list) elements on the page. |
| element.class | div.profile | This CSS selector selects all <div> elements with the class profile. |
| element,element | div, p | The comma-separated selector selects all the div and p elements on the page. |
| element element | p ol | This type of selector combination selects all <ol>(ordered-list) elements inside <p> elements. |
| :empty | p:empty | Use this selector to select every <p> element that has no children (including text nodes). |
| :enabled | input:enabled | This CSS selector selects every enabled <input> element. |
| :first-child | li:first-child | We use this selector to select every <li> element that is the first child of its parent. |
| ::first-letter | p::first-letter | Use this selector to select the first letter of every <p> (paragraph) element. |
| ::first-line | p::first-line | We can select the first line of every <p> element. |
| :first-of-type | li:first-of-type | Use this CSS selector to select every <li> element that is the first <li> element of its parent. |
| :focus | input:focus | We can select the input element which is currently in focus. |
| :focus-visible | button:focus-visible | This selector targets the button element which is currently in focus and is highlighted. |
| :focus-within | button:focus-within | We can select the button element which is currently in focus or has a focused descendant. |
| :fullscreen | :fullscreen | Use this selector to select the element that is in full-screen mode. |
| :future | :future(p) | This is a time-dimensional pseudo-class selector and selects any p element that appears after the current p elements, e.g. in video subtitles. |
| :has() | h1:has(+ h2) | We can use this selector to check if any h1 heading contains h2 descendants. |
| :hover | a:hover | To select the hover links i.e. when the pointer moves over the links, we can use this selector. |
| #id | #firstname | To select all elements with the attribute value of id equal to firstname, we use this CSS selector. |
| :in-range | input:in-range | Using this selector, we can select all input elements with a value within a specified range. |
| :indeterminate | input:indeterminate | We can select all input elements that are in an indeterminate state with this selector. |
| :invalid | input:invalid | Use this selector to select all input elements with an invalid value. |
| :is() | :is(ol, ul) span | This selector takes an ol and ul selectors as its arguments and selects a span element that is within the ul or ol element. |
| :lang(language) | p:lang(fr) | Use this selector to select every <p> element with a lang attribute equal to fr (French). |
| :last-child | li:last-child | We can select every <li> element that is the last child of its parent using this selector. |
| :last-of-type | h2:last-of-type | Use this selector to select every <h2> element that is the last <h2> element of its parent. |
| :link | a:link | Use this selector to select all unvisited a links. |
| :local-link | a:local-link | This selector targets the local links within the same document whose href starts with #. |
| :matches() | p:matches(.class1, .class2) | This selector targets div element with class .class1 or .class2. |
| ::marker | li::marker | We can select the markers of list items using this selector. |
| :not(selector) | :not(a) | We can select every element that is not a <a>(anchor) element with this selector. |
| :nth-child(n) | li:nth-child(3) | Use this CSS selector to select every <li> element that is the third child of its parent. |
| :nth-last-child(n) | p:nth-last-child(2) | Use this selector to select every <p> element that is the second child of its parent, counting from the last child. |
| :nth-last-of-type(n) | h3:nth-last-of-type(2) | We can select every <h3> heading that is the second <h3> element of its parent, counting from the last child using this selector. |
| :nth-of-type(n) | h3:nth-of-type(2) | We can select every <h3> heading that is the second <h3> element of its parent using this selector. |
| :only-of-type | p:only-of-type | Use this selector to select every <p> element that is the only <p> element of its parent. |
| :only-child | li:only-child | This selector selects every <li> element that is the only child of its parent. |
| :optional | input:optional | This selector selects input elements with no required attribute. |
| :out-of-range | input:out-of-range | Use this selector to select the input elements with a value outside a specified range. |
| :past | :past(p, span) | It matches all the p and span elements that appeared before the elements which matched the |
| ::placeholder | textarea::placeholder | Use this CSS selector to select the textarea text with the placeholder attribute specified. |
| :placeholder-shown | textarea:placeholder-shown | With this CSS selector, we can select the textarea element when it is empty and its placeholder attribute is specified and displayed. |
| :read-only | textarea:read-only | This CSS selector selects the textarea elements with the readonly attribute specified. |
| :read-write | textarea:read-write | This selector selects the textarea elements with the readonly attribute NOT specified, |
| :required | input:required | We can select input elements with the required attribute specified with this selector. |
| :root | :root | We can select the document's root element using this selector. |
| :scope | .tab-content > div:scope p | Use this selector to select only p within each div of .tab-content element. |
| ::selection | ::selection | Use this selector to select the portion of an element that is selected by a user using the cursor. |
| :target | #contents:target | This selector selects the current active #contents element. e.g. www.tutsinsider.com/#contents. |
| :valid | input:valid | To select all input elements with a valid value, use this selector. |
| :visited | a:visited | Use this selector to select all visited links. |
| :where() | :where(h2, .important) | Use this selector to select elements that are either an h2 tag or have the class .important. |
3. Reference Links
To curate this comprehensive and thoroughly updated reference list of CSS selectors, we relied on a variety of trusted and authoritative resources.
- The selector reference available for CSS language on the official website was also helpful to write up this ultimate CSS tutorial.
- Moreover, the ultimate reference index on official webiste was quite handy to compile this ultimate CSS selectors list.
- We found valuable resources on W3Schools to verify the authenticity of CSS selectors.
- The data available on MDN proved immensely helpful, offering an excellent and up-to-date directory of CSS selectors.