curriculum/challenges/english/blocks/review-css-pseudo-classes/671a907bad4538752765f2ff.md
:active Pseudo-class: This pseudo-class lets you select the active state of an element, like clicking on a button.:hover Pseudo-class: This pseudo-class defines the hover state of an element.:focus Pseudo-class: This pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input.:focus-within Pseudo-class: This pseudo-class is used to apply styles to an element when it or any of its descendants have focus.input elements based on the state they are in before and after user interaction.:enabled Pseudo-class: This pseudo-class is used to target form buttons or other elements that are currently enabled.:disabled Pseudo-class: This pseudo-class lets you style an interactive element in disabled mode.:checked Pseudo-class: This pseudo-class is used to indicate to the user that it is checked.:valid Pseudo-class: This pseudo-class targets the input fields that meet the validation criteria.:invalid Pseudo-class: This pseudo-class targets the input fields that do not meet the validation criteria.:in-range and :out-of-range Pseudo-classes: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints.:required Pseudo-class: This pseudo-class targets input elements that have the required attribute. It signals to the user that they must fill out the field to submit the form.:optional Pseudo-class: This pseudo-class applies styles to input elements that are not required and can be left empty.:autofill Pseudo-class: This pseudo-class applies styles to input fields that the browser automatically fills with saved data.:any-link Pseudo-class: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.:link Pseudo-class: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.:local-link Pseudo-class: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.:visited Pseudo-class: This pseudo-class targets a link the user has visited.:target Pseudo-class: This pseudo-class is used to apply styles to an element that is the target of a URL fragment.:root Pseudo-class: This pseudo-class is usually the root html element. It helps you target the highest level in the document so you can apply a common style to the entire document. :empty Pseudo-class: Empty elements, that is, elements with no children other than white space, are also included in the document tree. That's why there's an :empty pseudo-class to target empty elements.:nth-child(n) Pseudo-class: This pseudo-class allows you to select elements based on their position within a parent.:nth-last-child(n) Pseudo-class: This pseudo-class enables you to select elements by counting from the end.:first-child Pseudo-class: This pseudo-class selects the first element in a parent element or the document.:last-child Pseudo-class: This pseudo-class selects the last element in a parent element or the document.:only-child Pseudo-class: This pseudo-class selects the only element in a parent element or the document.:first-of-type Pseudo-class: This pseudo-class selects the first occurrence of a specific element type within its parent.:last-of-type Pseudo-class: This pseudo-class selects the last occurrence of a specific element type within its parent.:nth-of-type(n) Pseudo-class: This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type.:only-of-type Pseudo-class: This pseudo-class selects an element if it's the only one of its type within its parent.:hover, :focus), functional pseudo-classes accept arguments.:is() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list.:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<p class="example">This text will change color.</p>
<p>This text will not change color.</p>
<p>This text will not change color.</p>
<p class="this-works-too">This text will change color.</p>
p:is(.example, .this-works-too) {
color: red;
}
:::
:where() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list. The difference between :is and :where is that the latter will have a specificity of 0.:where(h1, h2, h3) {
margin: 0;
padding: 0;
}
:has() Pseudo-class: This pseudo-class is often dubbed the "parent" selector because it allows you to style elements that contain child elements specified in the selector list.article:has(h2) {
border: 2px solid hotpink;
}
:not() Pseudo-class: This pseudo-class is used to select elements that do not match the provided selector.p:not(.example) {
color: blue;
}
::before Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just before the element.::after Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just after the element.::first-letter Pseudo-element: This pseudo-element targets the first letter of an element's content, allowing you to style it.::marker Pseudo-element: This pseudo-element lets you select the marker (bullet or numbering) of list items for styling.Review the CSS Pseudo-classes topics and concepts.