WikiGalaxy
CSS Pseudo-classes
Introduction to Pseudo-classes:
Pseudo-classes are used in CSS to define the special state of an element. They allow you to style an element when it is in a specific state, such as when it is hovered over or focused.
Common Pseudo-classes:
:hover - Applied when the user designates an element (with some pointing device), but does not activate it.
:focus - Applied when an element has received focus, either through keyboard input or by selecting it with a mouse.
:nth-child(n) - Matches elements based on their position in a group of siblings.
/* Change background color on hover */
button:hover {
background-color: lightblue;
}
/* Style input when focused */
input:focus {
border-color: blue;
}
/* Style every second list item */
li:nth-child(2n) {
background-color: #f2f2f2;
}
Advanced Usage:
Pseudo-classes can be combined with other selectors to create complex rules. For example, you can style a link that has not been visited and is hovered over using a combination of pseudo-classes.
Console Output:
No direct console output for CSS pseudo-classes.
Using :first-child and :last-child
Understanding :first-child and :last-child:
The :first-child pseudo-class selects the first child element of its parent, while :last-child selects the last child element. These selectors are useful for applying styles to specific elements within a container.
/* Style the first paragraph in a div */
div p:first-child {
font-weight: bold;
}
/* Style the last item in a list */
ul li:last-child {
color: red;
}
Practical Application:
These pseudo-classes are particularly useful when you need to apply styles to the first or last element in a series, such as highlighting the first item in a list or the last paragraph in a section.
Console Output:
No direct console output for CSS pseudo-classes.
Exploring :not() Selector
Functionality of :not() Selector:
The :not() pseudo-class is used to exclude elements from a selection. It allows you to apply styles to all elements that do not match a given selector.
/* Style all buttons except those with class 'special' */
button:not(.special) {
background-color: gray;
}
Use Cases:
This selector is useful for applying styles to a broad set of elements while excluding specific ones, such as styling all input fields except checkboxes or radio buttons.
Console Output:
No direct console output for CSS pseudo-classes.
Using :checked Pseudo-class
Purpose of :checked:
The :checked pseudo-class targets checkboxes or radio buttons that are checked. It is often used to style elements based on their checked state.
/* Style checked checkboxes */
input[type="checkbox"]:checked {
border-color: green;
}
Application in Forms:
This pseudo-class is particularly useful for styling form elements based on user interaction, providing visual feedback when a checkbox or radio button is selected.
Console Output:
No direct console output for CSS pseudo-classes.
Understanding :disabled and :enabled
Functionality:
The :disabled and :enabled pseudo-classes are used to style form elements based on their enabled or disabled state. This can enhance user experience by visually indicating which elements are interactive.
/* Style disabled input fields */
input:disabled {
background-color: #ccc;
color: #666;
}
/* Style enabled input fields */
input:enabled {
background-color: white;
color: black;
}
Practical Use:
These pseudo-classes are useful for form validation and user interface enhancements, helping users understand which fields are available for input.
Console Output:
No direct console output for CSS pseudo-classes.
Exploring :before and :after
Purpose of :before and :after:
The :before and :after pseudo-elements are used to insert content before or after an element's content. They are often used to add stylistic elements without additional HTML markup.
/* Add a decorative element before a paragraph */
p:before {
content: "★";
color: gold;
margin-right: 5px;
}
/* Add a decorative element after a paragraph */
p:after {
content: "★";
color: gold;
margin-left: 5px;
}
Creative Uses:
These pseudo-elements are great for adding icons, quotes, or any decorative content that enhances the visual appeal of a webpage without cluttering the HTML.
Console Output:
No direct console output for CSS pseudo-classes.
Using :link and :visited
Functionality:
The :link pseudo-class targets unvisited links, while :visited targets links that have been visited by the user. These can be used to differentiate between visited and unvisited links on a webpage.
/* Style unvisited links */
a:link {
color: blue;
}
/* Style visited links */
a:visited {
color: purple;
}
Practical Application:
These pseudo-classes are essential for providing visual feedback on navigation links, helping users track which pages they have already visited.
Console Output:
No direct console output for CSS pseudo-classes.
Leveraging :nth-of-type()
Understanding :nth-of-type():
The :nth-of-type() pseudo-class selects elements of a given type based on their position among siblings. It is useful for styling elements that share the same type but differ in their order.
/* Style every third paragraph */
p:nth-of-type(3n) {
color: orange;
}
Practical Use:
This pseudo-class is ideal for styling repetitive elements in a layout, such as alternating styles for table rows or list items.
Console Output:
No direct console output for CSS pseudo-classes.
