CSS pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They allow you to style elements based on their state or characteristics that aren't directly represented in the HTML structure.
:hover
The :hover pseudo-class applies styles to an element when the user hovers over it with a pointing device (like a mouse).
<style> a:hover { color: red; } </style> <a href="#">Hover over this link</a>
When you hover over the link, its color changes to red.
:active
The :active pseudo-class applies styles to an element when it is being activated, typically when a user clicks on it.
<style> a:active { color: green; } </style> <a href="#">Click this link</a>
When you click on the link, it turns green while the mouse button is held down.
:focus
The :focus pseudo-class applies styles to an element when it has focus, typically when the user clicks on it or tabs to it.
<style> input:focus { border-color: blue; outline: none; } </style> <input type="text" placeholder="Click or tab to focus">
When you click on or tab to the input field, its border changes to blue.
:nth-child()
The :nth-child() pseudo-class selects elements based on their position among their siblings. You can specify a number, keyword, or formula inside the parentheses.
<style> li:nth-child(2) { color: orange; } li:nth-child(odd) { background-color: lightgray; } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
- The second list item will be orange.
- All odd-numbered list items will have a light gray background.
:nth-of-type()
The :nth-of-type() pseudo-class works similarly to :nth-child(), but it only counts siblings of the same type (e.g., only <li> elements).
<style> p:nth-of-type(2) { color: purple; } </style> <title>Nth-of-type Pseudo-class Example</title> <div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div> <p>This paragraph is not affected.</p>
The second <p> element inside the <div> will be purple, while the <p> outside the <div> is not affected.
:first-child
The :first-child pseudo-class targets an element that is the first child of its parent.
<style> p:first-child { font-weight: bold; } </style> <div> <p>This is the first child.</p> <p>This is the second child.</p> </div>
The first <p> element inside the <div> will be bold because it's the first child.
:last-child
The :last-child pseudo-class targets an element that is the last child of its parent.
<style> p:last-child { font-style: italic; } </style> <div> <p>This is the first child.</p> <p>This is the last child.</p> </div>
The last <p> element inside the <div> will be italicized because it's the last child.
:only-child
The :only-child pseudo-class targets an element that is the only child of its parent.
<style> p:only-child { color: blue; } </style> <div> <p>This paragraph is the only child and will be blue.</p> </div> <div> <p>This paragraph is not the only child and will not be blue.</p> <p>This is another paragraph.</p> </div>
The first <p> inside the first <div> will be blue because it's the only child. The other <p> elements won't be affected.
:not()
The :not() pseudo-class selects elements that do not match a certain selector.
<style> p:not(.special) { color: gray; } </style> <p>This paragraph will be gray.</p> <p class="special">This paragraph will not be gray.</p>
The :not(.special) selector will apply styles to all <p> elements except those with the class special.
:nth-last-child()
The :nth-last-child() pseudo-class works like :nth-child(), but it counts elements from the end, rather than from the beginning.
<style> li:nth-last-child(1) { color: brown; } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
The last list item will be brown.
:nth-last-of-type()
The :nth-last-of-type() pseudo-class is similar to :nth-last-child(), but it only counts siblings of the same type, starting from the end.
<style> p:nth-last-of-type(1) { background-color: yellow; } </style> <div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div> <p>Outside Paragraph</p>
The last <p> element inside the <div> will have a yellow background.
:checked
The :checked pseudo-class applies styles to an element when it is checked, such as a checkbox or radio button.
<style> input:checked + label { color: green; } </style> <input type="checkbox" id="checkbox1"> <label for="checkbox1">Check me</label>
When the checkbox is checked, the label will turn green.
:disabled
The :disabled pseudo-class applies styles to an element that is disabled, such as form elements.
<style> input:disabled { background-color: lightgray; } </style> <input type="text" disabled value="This is disabled">
The disabled input field will have a light gray background.
:enabled
The :enabled pseudo-class applies styles to elements that are enabled, typically form elements.
<style> input:enabled { background-color: white; } </style> <input type="text" value="This is enabled">
The enabled input field will have a white background.
:root
The :root pseudo-class matches the root element of the document, which is typically the <html> element. It is often used to define global CSS variables.
<style> :root { --main-color: blue; } body { color: var(--main-color); } </style> <p>This text is blue.</p>
The :root pseudo-class defines a CSS variable --main-color that can be used throughout the document.
:target
The :target pseudo-class applies styles to an element when its id matches the fragment identifier of the URL.
<style> #section2:target { background-color: yellow; } </style> <h2 id="section1">Section 1</h2> <p>This is section 1.</p> <h2 id="section2">Section 2</h2> <p>This is section 2.</p> <h2 id="section3">Section 3</h2> <p>This is section 3.</p> <a href="#section2">Go to Section 2</a>
When you click the "Go to Section 2" link, the background color of "Section 2" will turn yellow.
:lang()
The :lang() pseudo-class allows you to apply styles to elements based on their language attribute.
<style> p:lang(en) { color: green; } p:lang(fr) { color: blue; } </style> <p lang="en">This is in English.</p> <p lang="fr">Ceci est en français.</p>
The paragraph in English will be green, and the paragraph in French will be blue.