CSS Pseudo Classes and Elements
CSS Pseudo Classes
CSS pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They allow you to apply styles based on the state or position of elements rather than their attributes or hierarchy alone. This can include interactive states (like hovering over a link) or structural states (like the first child of a parent).
Types of Pseudo-Classes
- Structural Pseudo-Classes: Target elements based on their position or relation within the document tree.
- :first-child: Selects the first child of its parent.
- :last-child: Selects the last child of its parent.
- :nth-child(n): Selects the nth child of its parent.
- :nth-of-type(n): Selects the nth child of a specific type of its parent.
- :only-child: Selects an element that is the only child of its parent.
- :empty: Selects elements that have no children.
- User Action Pseudo-Classes: Target elements based on user interaction.
- :hover: Applies when the mouse pointer is over the element.
- :focus: Applies when the element is focused (e.g., input fields).
- :active: Applies when the element is being activated (e.g., clicked).
- :visited: Applies to links that have been visited.
- :link: Applies to links that have not been visited.
- Form Control Pseudo-Classes: Target elements based on their state in a form.
- :checked: Applies to checked input elements (checkboxes, radio buttons).
- :disabled: Applies to disabled form elements.
- :enabled: Applies to enabled form elements.
- :required: Applies to form elements with the required attribute.
- :optional: Applies to form elements without the required attribute.
- Other Pseudo-Classes: Include additional specific scenarios.
- :not(selector): Applies to elements that do not match the specified selector.
- :lang(language): Applies to elements with a specified language attribute.
- :root: Applies to the root element of the document (<html> in HTML).
EXAMPLE TO SHOW PSEUDO CLASSES
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Pseudo-Classes Example</title>
<style>
/* User Action Pseudo-Classes */
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
/* Structural Pseudo-Classes */
ul li:first-child {
color: green;
font-weight: bold;
}
ul li:last-child {
color: blue;
font-style: italic;
}
ul li:nth-child(odd) {
background-color: #f0f0f0;
}
ul li:nth-child(even) {
background-color: #e0e0e0;
}
p:only-child {
border: 2px solid red;
padding: 10px;
}
/* Form Pseudo-Classes */
input:focus {
border: 2px solid blue;
outline: none;
}
input:required {
background-color: #ffdddd;
}
input:disabled {
background-color: #ddd;
color: #666;
}
input:checked {
background-color: lightgreen;
}
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
/* Other Pseudo-Classes */
p:not(.highlight) {
color: gray;
}
.divclass:empty {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
}
p:target {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Pseudo-Classes Example</h1>
<!– User Action Pseudo-Classes –>
<h2>User Action Pseudo-Classes</h2>
<p>
<a href=”#pseudo-class”>This is an unvisited link.</a><br>
<a href=”#pseudo-class” class=”visited”>This is a visited link.</a><br>
</p>
<!– Structural Pseudo-Classes –>
<h2>Structural Pseudo-Classes</h2>
<ul>
<li>First item (first-child)</li>
<li>Second item (nth-child)</li>
<li>Third item (nth-child)</li>
<li>Fourth item (last-child)</li>
</ul>
<p>Single paragraph inside a container with no siblings (only-child).</p>
<!– Form Pseudo-Classes –>
<h4>Form Pseudo-Classes</h4>
<form>
<label for=”name”>Name (required):</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”email”>Email (optional):</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”subscribe”>Subscribe:</label>
<input type=”checkbox” id=”subscribe” name=”subscribe” checked><br><br>
<label for=”comments”>Comments (disabled):</label>
<textarea id=”comments” name=”comments” disabled></textarea><br><br>
<label for=”age”>Age (must be 18+):</label>
<input type=”number” id=”age” name=”age” min=”18″ ><br><br>
<label for=”consent”>Consent:</label>
<input type=”checkbox” id=”consent” name=”consent” required><br><br>
</form>
<!– Other Pseudo-Classes –>
<h2>Other Pseudo-Classes</h2>
<div class=”divclass”></div> <!– Empty div to demonstrate :empty –>
</body>
</html>
OUTPUT
CSS Pseudo-Classes Example
User Action Pseudo-Classes
Structural Pseudo-Classes
- First item (first-child)
- Second item (nth-child)
- Third item (nth-child)
- Fourth item (last-child)
Single paragraph inside a container with no siblings (only-child).
Form Pseudo-Classes
Other Pseudo-Classes
CSS Pseudo Elements
CSS pseudo-elements are used to apply styles to specific parts of an element’s content or to create content that is not directly included in the HTML. Unlike pseudo-classes, which style elements based on their state or position, pseudo-elements target specific portions or generated content of an element.
Key Characteristics of Pseudo-Elements:
- Content Generation: Pseudo-elements can insert generated content before or after the actual content of an element.
- Text Styling: They can style specific parts of the text within an element, such as the first line or first letter.
- Usage: They are used to enhance styling without modifying the HTML structure.
Selector | Example | Example description |
::after | p::after | Insert something after the content of each <p> element |
::before | p::before | Insert something before the content of each <p> element |
::first-letter | p::first-letter | Selects the first letter of each <p> element |
::first-line | p::first-line | Selects the first line of each <p> element |
::marker | ::marker | Selects the markers of list items |
::selection | p::selection | Selects the portion of an element that is selected by a user |
EXAMPLE TO SHOW PSEUDO ELEMENTS
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Pseudo-Elements Example</title>
<style>
/* Style for the entire container */
.container_pseudo {
border: 2px solid #333;
padding: 10px;
width: 90%;
margin: 50px auto;
background-color: #f9f9f9;
}
/* Add content before and after the paragraph */
.container_pseudo p::before {
content: “Start: “;
font-weight: bold;
color: green;
}
.container_pseudo p::after {
content: ” [End]”;
font-weight: bold;
color: red;
}
/* Style the first letter of the paragraph */
.container_pseudo p::first-letter {
font-size: 2em;
color: blue;
font-weight: bold;
}
/* Style the first line of the paragraph */
.container_pseudo p::first-line {
font-weight: bold;
color: purple;
}
/* Style the marker of list items */
.container_pseudo ul li::marker {
color: orange;
font-size: 1.5em;
}
/* Style the text selection */
.container_pseudo p::selection {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<div class=”container_pseudo”>
<h5>Welcome to the Pseudo-Elements Example</h5>
<p>This is a simple paragraph to demonstrate the usage of CSS pseudo-elements.</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
</body>
</html>
OUTPUT
Welcome to the Pseudo-Elements Example
This is a simple paragraph to demonstrate the usage of CSS pseudo-elements.
- First item
- Second item
- Third item