CSS selectors are patterns used to select elements and apply styles in CSS (Cascading Style Sheets). They offer various methods for targeting elements with precision.
|
:first-child Select the First Child |
The :first-child pseudo-class selects the element that is the first child of its parent. It works the same as the :nth-child(1). |
|---|---|
|
:last-child Select the Last Child |
The :last-child pseudo-class selects the element that is the last child of its parent. It works the same as the :nth-last-child(1). |
|
:nth-child(n) Select the nth child |
The :nth-child(n) pseudo-class selects the element that is the nth child of its parent. For example, :nth-child(2) selects the second child element. |
|
:nth-last-child(n) Select the nth Child Element from the End |
The :nth-last-child(n) pseudo-class selector selects an element that is the nth child of its parent, counting from the end. For example, :nth-last-child(2) selects the second child element when counting backward from the last child. |
|
:nth-of-type(n) Select the nth Child of the Same Tag |
The :nth-of-type(n) pseudo-class selects the element that is the nth sibling of the same tag type. For example, p:nth-of-type(2) selects the second <p> element among only the <p> elements that share the same parent. |
|
:nth-last-of-type(n) Select the nth-to-last Child of the Same Tag |
The :nth-last-of-type(n) pseudo-class selector selects the nth element from the end among siblings of the same tag name. |
|
:first-of-type Select the First Child of the Same Tag |
The :first-of-type pseudo-class selects the element that is the first sibling of the same tag type. For example, p:first-of-type selects the first <p> element among only the <p> elements that share the same parent. |
|
:last-of-type Select the Last Child of the Same Tag |
The :last-of-type pseudo-class selects the element that is the last sibling of the same tag type. For example, p:last-of-type selects the last <p> element among only the <p> elements that share the same parent. |
|
:only-of-type Select the Only Child of Its Tag Name |
The :only-of-type pseudo-class selector selects an element that is the only one of its tag type (tag name) among its sibling elements. In other words, it matches an element that is both the first and the last of its kind within the same parent. |
|
:focus-within Matches Focused Elements or Descendants |
The :focus-within pseudo-class selects an element when it, or any of its descendants, has focus. |
|
::before Before Pseudo-Element Selector |
The ::before pseudo-element selector generates a child pseudo-element directly before the selected element's actual content, acting as its first child, and allows it to be styled. |
|
::after After Pseudo-Element Selector |
The ::after pseudo-element selector generates a child pseudo-element directly after the selected element’s actual content, acting as its last child, and allows it to be styled. |
|
::marker Select Automatically Generated List Markers |
The ::marker pseudo-element selector selects the list markers automatically generated for elements whose display property is set to list-item, such as li and summary elements. |
|
::placeholder Styling Placeholder Text |
The ::placeholder pseudo-element selector is used to style the placeholder text of HTML text input controls, allowing customization of size, color, horizontal alignment, and more. |