Pseudo-selectors in CSS allow you to apply styles to elements based on their state or position within the DOM (Document Object Model). These selectors are powerful because they enable you to style elements dynamically based on user interaction, content structure, or specific conditions.
:hover Pseudo-Selector
The :hover pseudo-selector applies styles to an element when the user hovers over it with the mouse. It's commonly used for interactive elements like buttons and links.
hover-pseudo-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hover Example</title> <link rel="stylesheet" href="../../css/selectors/hover-pseudo-selector.css"> </head> <body> <button class="hover-button">Hover Over Me</button> </body> </html>
hover-pseudo-selector.css
/* style.css */ .hover-button { background-color: green; color: white; padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; } .hover-button:hover { background-color: blue; }
Open hover-pseudo-selector.html in browser, you can see below button.
Hover a mouse over the button, you can see that the button background color is changed to blue.
:first-child Pseudo-Selector
The :first-child pseudo-selector targets the first child element of its parent. This is useful for styling the first item in a list or any other container.
first-child-pseudo-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>First Child Example</title> <link rel="stylesheet" href="../../css/selectors/first-child-pseudo-selector.css"> </head> <body> <ul class="item-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul class="item-list"> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> <ul class="item-list"> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </body> </html>
first-child-pseudo-selector.css
.item-list li:first-child { font-weight: bold; color: blue; }
Open ‘first-child-pseudo-selector.html’ in a browser, you can see below kind of screen.
The li:first-child selector applies bold text and a blue color to the first list items (Item 1, Item 4 and Item 7). ‘first-child’ pseudo selector allows for specific styling of the first element in a sequence, such as highlighting important content.
:last-child Pseudo-Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>First Child Example</title> <link rel="stylesheet" href="../../css/selectors/last-child-pseudo-selector.css"> </head> <body> <ul class="item-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul class="item-list"> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> <ul class="item-list"> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </body> </html>
last-child-pseudo-selector.css
.item-list li:last-child { font-style: italic; color: red; }
The li:last-child selector applies italic text and a red color to the last list item (Item 3, Item 6, Item 9). ‘last-child’ pseudo selector helps to distinguish the last element in a sequence, such as indicating the end of a list.
:nth-child() Pseudo-Selector
The :nth-child() pseudo-selector targets elements based on their order within a parent. It accepts a formula, such as odd, even, or a specific number.
nth-child-pseudo-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nth Child Example</title> <link rel="stylesheet" href="../../css/selectors/nth-child-pseudo-selector.css"> </head> <body> <h1>First List</h1> <ul class="item-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h1>Second List</h1> <ul class="item-list"> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> </body> </html>
nth-child-pseudo-selector.css
.item-list li:nth-child(even) { background-color: #f2f2f2; } .item-list li:nth-child(odd) { background-color: #cccccc; }
Open ‘nth-child-pseudo-selector.html’ in the browser, you can see below kind of screen.
1. The li:nth-child(even) selector applies a light gray background to even-numbered items (Item 2, Item 4, Item 6 and Item 8).
2. The li:nth-child(odd) selector applies a darker gray background to odd-numbered items (Item 1, Item 3, Item 5 and Item 7).
We can target a specific child element by passing a positive integer to :nth-child().
Example
.item-list li:nth-child(3) { background-color: yellow; }
Using a formula
You can also use a formula in the form an + b where:
1. a is a cycle size (it repeats every a elements).
2. n is a counter starting from 0.
3. b is an offset that determines which elements to select within each cycle.
Example
.item-list li:nth-child(2n + 1) { background-color: lightblue; }
This rule targets every odd element (1st, 3rd, 5th, etc.) starting from the first one.
.item-list li:nth-child(3n + 2) { background-color: lightgreen; }
This targets every third element starting with the second one (2nd, 5th, 8th, etc.).
Selecting Multiple Specific Children:
You can combine multiple :nth-child() selectors to target specific items.
Example
.item-list li:nth-child(1), .item-list li:nth-child(4) { font-weight: bold; }
This rule applies bold text to the first and fourth list items.
nth-child-miscellaneous.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-child CSS Demo</title> <link rel="stylesheet" href="../../css/selectors/nth-child-miscellaneous.css"> </head> <body> <h1>nth-child CSS Demo</h1> <ul class="item-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> </body> </html>
nth-child-miscellaneous.css
.item-list li:nth-child(3) { font-size: 25px; font-weight: bold; } .item-list li:nth-child(2n + 1) { background-color: lightblue; } .item-list li:nth-child(3n + 2) { background-color: lightgreen; } .item-list li:nth-child(1), .item-list li:nth-child(4) { font-weight: bold; }
Open ‘nth-child-miscellaneous.html’ in browser, you will see below kind of screen.
:only-child Pseudo-Selector
The :only-child pseudo-selector targets an element that is the only child of its parent. This selector is useful for applying styles only when an element has no siblings.
only-child-pseudo-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Only Child Example</title> <link rel="stylesheet" href="../../css/selectors/only-child-pseudo-selector.css"> </head> <body> <div class="container"> <p>I am the only child</p> </div> <div class="container"> <p>I am not the only child</p> <p>Another sibling here</p> </div> </body> </html>
only-child-pseudo-selector.css
.container p:only-child { font-size: 20px; color: green; text-align: center; }
Open ‘only-child-pseudo-selector.html’ in browser, you can see below kind of screen.
The p:only-child selector applies larger, green text to the paragraph inside the first .container because it has no siblings.
Advantages of Pseudo-Selectors
1. Pseudo-selectors like :hover provide dynamic styling that reacts to user behavior, improving the user interface's responsiveness and interactivity.
Conditional Styling:
2. Pseudo-selectors like :first-child, :last-child, :nth-child(), and :only-child allow for conditional styling based on the element's position or context within the DOM. This makes it easier to apply different styles to similar elements based on their order or uniqueness.
3. Instead of adding classes or JavaScript to manage styling for specific cases, pseudo-selectors let you apply styles directly in the CSS, leading to cleaner and more maintainable code.
4. These selectors help establish a visual hierarchy and structure in the content, making it easier for users to navigate and understand the information presented.
No comments:
Post a Comment