CSS pseudo-elements are powerful tools that allow you to target and style specific parts of elements.
They provide additional styling capabilities and enable you to create unique and engaging designs.
In this blog post, we’ll explore a variety of CSS pseudo-elements, providing detailed explanations and example code for each one.
By the end, you’ll have a solid understanding of how to leverage pseudo-elements to enhance your CSS styling.
Let’s dive in!
CSS Pseudo-Elements Demystified
::after
The ::after pseudo-element inserts content after the selected element. It can be used to add decorative or informational content to an element.
Example:
.button::after {
content: "→";
}
::before
The ::before pseudo-element inserts content before the selected element. It’s often used to add decorative or informative elements to existing elements.
Example:
blockquote::before {
content: "❝";
}
::first-letter
The ::first-letter pseudo-element targets the first letter of the selected element. It’s commonly used to apply specific styles to the initial letter of a paragraph or heading.
Example:
p::first-letter {
font-size: 2em;
color: #ff0000;
}
::first-line
The ::first-line pseudo-element targets the first line of text within a block-level element. It’s useful for applying specific styles to the initial line of a paragraph or heading.
Example:
p::first-line {
font-weight: bold;
color: #333333;
}
::marker
The ::marker pseudo-element targets the marker of a list item. It allows you to apply styles to the bullet or numbering of an item in an ordered or unordered list.
Example:
ul::marker {
color: #ffcc00;
}
::selection
The ::selection pseudo-element targets the portion of text that the user has selected. It’s commonly used to style selected text with different background colors or text colors.
Example:
::selection {
background-color: #ffff00;
color: #000000;
}
::after
The ::after pseudo-element inserts content after the selected element. It can be used to add decorative or informational content to an element.
Example:
.button::after {
content: "→";
}
::before
The ::before pseudo-element inserts content before the selected element. It’s often used to add decorative or informative elements to existing elements.
Example:
blockquote::before {
content: "❝";
}
::first-letter
The ::first-letter pseudo-element targets the first letter of the selected element. It’s commonly used to apply specific styles to the initial letter of a paragraph or heading.
Example:
p::first-letter {
font-size: 2em;
color: #ff0000;
}
::first-line
The ::first-line pseudo-element targets the first line of text within a block-level element. It’s useful for applying specific styles to the initial line of a paragraph or heading.
Example:
p::first-line {
font-weight: bold;
color: #333333;
}
::marker
The ::marker pseudo-element targets the marker of a list item. It allows you to apply styles to the bullet or numbering of an item in an ordered or unordered list.
Example:
ul::marker {
color: #ffcc00;
}
::selection
The ::selection pseudo-element targets the portion of text that the user has selected. It’s commonly used to style selected text with different background colors or text colors.
Example:
::selection {
background-color: #ffff00;
color: #000000;
}
:not
The :not pseudo-class selects elements that do not match a specific selector. It’s useful for excluding certain elements from styling rules.
Example:
p:not(.special) {
color: #333333;
}
:active
The :active pseudo-class selects an element while it’s being activated or clicked by the user.
Example:
.button:active {
background-color: #ff0000;
}
:checked
The :checked pseudo-class selects an element when it’s checked, typically used with input elements of type checkbox or radio.
Example:
input[type="checkbox"]:checked {
border-color: #00ff00;
}
:disabled
The :disabled pseudo-class selects disabled elements. It’s often used to apply specific styles to disabled form inputs.
Example:
input:disabled {
opacity: 0.5;
}
/*
:enabled
The `:enabled` pseudo-class selects enabled elements. It's the opposite of the `:disabled` pseudo-class.
*/
input:enabled {
border-color: #00ff00;
}
:empty
The :empty pseudo-class selects elements that have no children or contain only empty spaces.
Example:
p:empty {
display: none;
}
:first-
child
The :first-child pseudo-class selects the first child element of its parent.
Example:
p:first-child {
margin-top: 0;
}
:first-of-type
The :first-of-type pseudo-class selects the first element of its type among its siblings.
Example:
p:first-of-type {
font-weight: bold;
}
:hover
The :hover pseudo-class selects an element when the user hovers over it with the mouse.
Example:
a:hover {
text-decoration: underline;
}
:in-range
The :in-range pseudo-class selects input elements with values within a specific range.
Example:
input[type="range"]:in-range {
background-color: #00ff00;
}
:invalid
The :invalid pseudo-class selects input elements with invalid values, typically used with form validation.
Example:
input:invalid {
border-color: #ff0000;
}
:lang
The :lang pseudo-class selects elements based on the language attribute specified in the HTML.
Example:
p:lang(fr) {
font-family: "Arial", sans-serif;
}
:last-child
The :last-child pseudo-class selects the last child element of its parent.
Example:
p:last-child {
margin-bottom: 0;
}
:last-of-type
The :last-of-type pseudo-class selects the last element of its type among its siblings.
Example:
p:last-of-type {
color: #ff0000;
}
:link
The :link pseudo-class selects unvisited links.
Example:
a:link {
color: #0000ff;
}
:nth-child
The :nth-child pseudo-class selects elements based on their position among their siblings.
Example:
ul li:nth-child(2n) {
background-color: #f0f0f0;
}
:nth-last-child
The :nth-last-child pseudo-class selects elements based on their position, counting from the last child.
Example:
ul li:nth-last-child(2) {
color: #ff0000;
}
:nth-last-of-type
The :nth-last-of-type pseudo-class selects elements based on their position, counting from the last element of the same type.
Example:
p:nth-last-of-type(2) {
font-weight: bold;
}
:nth-of-type
The :nth-of-type pseudo-class selects elements based on their position among siblings of the same type.
Example:
p:nth-of-type(2n+1) {
color: #ff0000;
}
:only-child
The :only-child pseudo-class selects elements that are the only child of their parent.
Example:
p:only-child {
font-style: italic;
}
:only-of-type
The :only-of-type pseudo-class selects elements that are the only elements of their type among siblings.
Example:
p:only-of-type {
background-color: #f0f0f0;
}
:optional
The :optional pseudo-class selects input elements that are not required.
Example:
input:optional {
border-color: #cccccc;
}
:out-of-range
The :out-of-range pseudo-class selects input elements with values outside a specific range.
Example:
input[type="range"]:out-of-range {
background-color: #ff0000;
}
:read-only
The :read-only pseudo-class selects input elements that are read-only.
Example:
input:read-only {
background-color: #f0f0f0;
}
:read-write
The :read-write pseudo-class selects input elements that are editable.
Example:
input:read-write {
border-color: #00ff00;
}
:required
The :required pseudo-class selects required input elements.
Example:
input:required {
border-color: #ff0000;
}
:root
The :root pseudo-class selects the root element of the document, typically the <html> element.
Example:
:root {
--primary-color: #ff0000;
}
:target
The :target pseudo-class selects the target element of the current URL fragment identifier.
Example:
#section:target {
background-color: #ffff00;
}
:valid
The :valid pseudo-class selects input elements with valid values, typically used with form validation.
Example:
input:valid {
border-color: #00ff00;
}
That’s all for now.
Congratulations! You’ve explored a comprehensive list of CSS pseudo-elements and pseudo-classes.
Each one provides unique styling capabilities, allowing you to create engaging and interactive web designs.
Remember to experiment and combine these pseudo-elements and pseudo-classes with other CSS properties to achieve your desired effects.
With this newfound knowledge, you’ll be able to take your CSS skills to the next level and create visually stunning websites.
Happy coding!
Source link
