| Selector | Description | Code Snippet |
| Universal Selector (*) | Targets all elements on the page. | * { property: value; } |
| Type Selector | Targets elements based on their HTML tag name. | p { font-size: 16px; } |
| Class Selector (.class) | Targets elements with a specific class attribute. | .btn { background-color: #007bff; } |
| ID Selector (#id) | Targets a single element with a specific ID attribute. | #header { border-bottom: 1px solid #ccc; } |
| Descendant Selector | Targets elements that are descendants of a parent. | ul li { list-style-type: disc; } |
| Child Selector | Targets elements that are direct children of a parent. | nav > ul { margin: 0; } |
| Adjacent Sibling Selector (+) | Targets an element directly preceded by a sibling element. | h2 + p { font-style: italic; } |
| General Sibling Selector (~) | Targets elements that share the same parent. | h2 ~ p { margin-top: 10px; } |
| Attribute Selector ([attr=value]) | Targets elements with specific attributes and values. | input[type="text"] { border: 1px solid #ccc; } |
| Pseudo-Class Selector | Targets elements in specific states or conditions. | a:hover { color: #ff6600; } |
| Pseudo-Element Selector | Targets specific parts of an element. | .quote::before { content: "❝"; } |
| :first-child | Targets the first child element of its parent. | li:first-child { font-weight: bold; } |
| :last-child | Targets the last child element of its parent. | li:last-child { font-style: italic; } |
| :nth-child(n) | Targets elements based on their position among siblings. | li:nth-child(odd) { background-color: #f0f0f0; } |
| :nth-of-type(n) | Targets elements of a specific type based on their position. | p:nth-of-type(2) { color: #ff0000; } |
| :hover | Targets elements when the mouse cursor hovers over them. | button:hover { background-color: #eee; } |
| :focus | Targets elements that currently have keyboard focus. | input:focus { border-color: #007bff; } |
| :active | Targets elements that are currently activated (e.g., clicked). | button:active { transform: scale(0.95); } |
| :visited | Targets visited links. | a:visited { color: #800080; } |
| :before | Creates a pseudo-element before the content of an element. | .alert::before { content: "⚠"; } |
| :after | Creates a pseudo-element after the content of an element. | .quote::after { content: "❞"; } |
| :not(selector) | Targets elements that do not match the specified selector. | p:not(.special) { font-weight: normal; } |
| :empty | Targets elements with no child elements or text content. | div:empty { display: none; } |
| :nth-last-child(n) | Targets elements based on their position among siblings, counting from the end. | li:nth-last-child(2) { font-size: 18px; } |
| :nth-last-of-type(n) | Targets elements of a specific type based on their position from the end. | p:nth-last-of-type(odd) { text-transform: uppercase; } |
| :target | Targets the element specified by the URL fragment identifier. | #section:target { background-color: #f5f5f5; } |
| :lang(language) | Targets elements with a specific language attribute. | h1:lang(en) { font-family: Arial, sans-serif; } |
| ::selection | Targets the text selected by the user. | ::selection { background-color: #ffff66; color: #333; } |
| :nth-match(n) | Targets elements that match a specific selector in a certain position among siblings. | li:nth-match(3 of .special) { color: #ff0000; } |
| :nth-last-match(n) | Targets elements that match a specific selector in a certain position from the end. | p:nth-last-match(2 of :not(.highlight)) { font-style: italic; } |
| Selector | Description | Code Snippet |
| :root | Targets the root element of the document (usually <html>). | :root { --primary-color: #007bff; } |
| :only-child | Targets elements that are the only child of their parent. | p:only-child { font-weight: bold; } |
| :only-of-type | Targets elements of a specific type that are the only child of their parent. | h1:only-of-type { font-size: 24px; } |
| :fullscreen | Targets elements displayed in fullscreen mode. | video:fullscreen { border: none; } |
| :nth-of-type(an+b) | Targets elements of a specific type based on a formula for position. | li:nth-of-type(3n+2) { background-color: #f0f0f0; } |
| :focus-visible | Targets elements that are in focus and can be accessed by keyboard. | button:focus-visible { outline: 2px solid #007bff; } |
| :placeholder-shown | Targets input elements with placeholder text shown. | input:placeholder-shown { border: 1px solid #ccc; } |
| ::marker | Targets the marker box of a list item. | li::marker { content: "•"; color: #ff0000; } |
| ::first-line | Targets the first line of a block-level element. | p::first-line { font-weight: bold; } |
| ::first-letter | Targets the first letter of a block-level element. | p::first-letter { font-size: 24px; color: #007bff; } |
| Selector | Description | Code Snippet |
| :first-of-type | Targets the first element of a specific type among siblings. | h2:first-of-type { font-size: 20px; } |
| Selector | Description | Code Snippet |
| :checked | Targets selected (checked) input elements. | input[type="checkbox"]:checked { border-color: #007bff; } |
| :disabled | Targets disabled input elements. | input:disabled { background-color: #f0f0f0; } |
| :enabled | Targets enabled input elements. | input:enabled { background-color: #ffffff; } |
| :required | Targets required form elements. | input:required { border-color: #ff0000; } |
| :optional | Targets optional form elements. | input:optional { border-color: #ccc; } |
| :indeterminate | Targets indeterminate checkboxes and radio buttons. | input[type="checkbox"]:indeterminate { opacity: 0.5; } |
| :default | Targets the default button in a form. | button:default { background-color: #007bff; } |
| :valid | Targets form elements with valid input. | input:valid { border-color: #00cc00; } |
| :invalid | Targets form elements with invalid input. | input:invalid { border-color: #ff0000; } |
| :in-range | Targets input elements with values within a specified range. | input[type="number"]:in-range { background-color: #ccffcc; } |
| :out-of-range | Targets input elements with values outside a specified range. | input[type="number"]:out-of-range { background-color: #ffcccc; } |
| :fullscreen | Targets elements displayed in fullscreen mode. | video:-webkit-full-screen { border: none; } |
| ::placeholder | Targets the placeholder text in an input field. | input::placeholder { color: #999; } |
| :active | Targets elements that are currently being clicked or activated. | button:active { transform: scale(0.95); } |
| Selector | Description | Code Snippet |
| :lang(language) | Targets elements with a specific language attribute. | p:lang(fr) { font-family: "Helvetica", sans-serif; } |
| :nth-col(n) | Targets elements in a specific column of a multi-column layout. | td:nth-col(2) { background-color: #f0f0f0; } |
| :nth-last-col(n) | Targets elements in a specific column from the end of a multi-column layout. | th:nth-last-col(1) { font-weight: bold; } |
| :nth-match(selector, n) | Targets elements that match a specific pattern among siblings. | div:nth-match(2 of .special) { border: 2px solid #007bff; } |
| :nth-last-match(selector, n) | Targets elements that match a specific pattern among siblings, counting from the end. | li:nth-last-match(odd of :not(.highlight)) { font-style: italic; } |
| ::part(part) | Targets elements that have been assigned a specific shadow DOM part. | button::part(content) { font-size: 18px; } |
| :where | Acts as a match-any selector, useful in complex selector combinations. | :where(section, article, aside) h2 { font-size: 24px; } |
| :is(selector) | Acts as a match-any selector, similar to :where. | :is(h1, h2, h3) { color: #007bff; } |
| :column | Targets elements that are direct children of a column element in a multi-column layout. | p:column(2) { font-weight: bold; } |
| :nth-child(an+b) | Targets elements using a formula for position (an+b). | ul li:nth-child(3n+2) { color: #ff6600; } |
| :nth-last-child(an+b) | Targets elements using a formula for position from the end (an+b). | ol li:nth-last-child(2n+1) { font-style: italic; } |
| :nth-of-type(an+b) | Targets elements of a specific type using a formula for position (an+b). | section:nth-of-type(odd) { background-color: #f0f0f0; } |
| :nth-last-of-type(an+b) | Targets elements of a specific type using a formula for position from the end (an+b). | article:nth-last-of-type(even) { background-color: #f0f0f0; } |
| :fullscreen | Targets elements when they are in full-screen mode. | video:fullscreen { border: none; } |
| :backdrop | Targets the backdrop of a modal or dialog element. | .modal:backdrop { background-color: rgba(0, 0, 0, 0.5); } |
| :focus-within | Targets a parent element when one of its descendants is focused. | .container:focus-within { border: 2px solid #007bff; } |
| :drop | Targets elements during a drag-and-drop operation. | .droppable:drop { background-color: #ffff66; } |
| Selector | Description | Code Snippet |
| ::cue | Targets the cue or caption text in an HTML5 audio or video element. | video::cue { color: #ff6600; } |
| ::slotted(selector) | Targets distributed elements in a shadow DOM slot. | ::slotted(span) { font-weight: bold; } |
| :host | Targets the shadow host element from within a shadow DOM. | :host { display: block; border: 1px solid #ccc; } |
| :host-context(selector) | Targets elements inside a shadow DOM that match a selector in the light DOM. | :host-context(article) h2 { font-size: 24px; } |
| :not(selector) | Targets elements that do not match the specified selector. | p:not(.special) { font-weight: normal; } |
| :empty | Targets elements with no child elements or text content. | div:empty { display: none; } |
| Selector | Description | Code Snippet |
| :nth-column(n) | Targets elements in a specific column of a multi-column layout. | td:nth-column(3) { background-color: #f0f0f0; } |
| :nth-last-column(n) | Targets elements in a specific column from the end of a multi-column layout. | th:nth-last-column(1) { font-weight: bold; } |
| :current | Targets the currently selected option in a dropdown list. | option:current { background-color: #ffff66; } |
| :focus-visible | Targets elements that are in focus and can be accessed by keyboard. | button:focus-visible { outline: 2px solid #007bff; } |
| :target-within | Targets elements within the targeted element specified by the URL fragment identifier. | #section:target-within p { color: #ff6600; } |
| :has(selector) | Targets elements that contain specific descendants. | div:has(p) { background-color: #f0f0f0; } |
| :nth-exactly(n) | Targets elements that match a specific selector in a certain position among siblings. | p:nth-exactly(3 of :not(.special)) { font-style: italic; } |
| :nth-last-exactly(n) | Targets elements that match a specific selector in a certain position from the end. | li:nth-last-exactly(2 of .highlight) { font-weight: bold; } |
| :any-link | Targets any link element. | a:any-link { color: #007bff; } |
| :local-link | Targets links to local resources. | a:local-link { border: 1px dashed #ccc; } |