# CSS Selectors Cheat Sheet ### **Cheat sheet of common selectors** `head` selects the element with the `head` tag `.red` selects all elements with the ‘red’ class `#nav` selects the elements with the ‘nav’ Id `div.row` selects all elements with the `div` tag and the ‘row’ class `[class="true"]` selects all elements with the `class` attribute with a value of “true” * \[name^="abc"] * \[name$="abc"] * \[name\*="abc"] ### We can combine selectors in interesting ways #### Some examples: `li a` DOM descendant combinator. All `a` tags that are a child of `li` tags `div.row *` selects all elements that are descendant (or child) of the elements with `div` tag and ‘row’ class `li > a` Difference combinator. Select direct descendants, instead of all descendants like the descendant selectors `li + a` The adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first `a` after each `li`. `li, a` Selects all `a` elements and all `li` elements. `li ~ a` The sibling combinator. Selects `a` element following a `li` element. ### Pseudo-selectors or pseudo structural classes These are also useful for selecting structural elements from the DOM. #### Here are some of them: `:first-child` Target the first element immediately inside (or child of) another element `:last-child` Target the last element immediately inside (or child of) another element `:nth-child()` Target the nth element immediately inside (or child of) another element. Admits integers, `even`, `odd`, or formulas `a:not(.name)` Selects all `a` elements that are not of the `.name` class `::after` Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements. `::before` Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements. We can use pseudo-classes to define a special state of an element of the DOM. But they don’t point to an element by themselves . #### Some examples: `:hover` selects an element that is being hovered by a mouse pointer `:focus` selects an element receiving focus from the keyboard or programattially `:active` selects an element being clicked by a mouse pointer `:link` selects all links that have not been clicked yet `:visited` selects a link that has already been clicked ### More info on the nth-child selector The `nth-child` selector is a css psuedo-class taking a pattern by which to match one or more elements relative to their position among siblings. #### Syntax ```css a:nth-child(pattern) { /* Css goes here */ } ``` #### **Pattern** The patterns accepted by `nth-child` can come in the form of keywords or an equation of the form An+B. **Keywords** **Odd** Odd returns all odd elements of a given type. ```css a:nth-childe(odd) { /* CSS goes here */ } ``` **Even** Even returns all even elements of a given type. ```css a:nth-childe(even) { /* CSS goes here */ } ``` **An+B** Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0). For example, the following will match every 3rd anchor element: ```css a:nth-childe(3n) { /* CSS goes here */ } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-webadmin.allianceitsc.com/others/css-selectors-cheat-sheet.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.