How to make use of pseudo-classes and pseudo-elements in CSS?

How to make use of pseudo-classes and pseudo-elements in CSS? Using CSS pseudo-classes and pseudo-elements, you can style elements according to their content, position, or state without requiring further HTML or JavaScript.

  • Specific states of elements are targeted by pseudo-classes (:). For example, :hover targets a mouse hover, :focus targets an element in focus, and :nth-child() selects items based on their order in a parent. They support dynamic element styling according to document structure or user interaction.
  • Pseudo-elements (::) target portions of an element, like ::before and ::after, which put material before or after an element, or ::first-line and ::first-letter, which style part of the text.

In order to create dynamic and visually appealing web designs without changing the document structure, both are necessary.

Exploring the Pseudo-Classes

Without changing the HTML structure, developers can apply styles based on user interactions or situations by using pseudo-classes in CSS to define the specific states of elements. This is an in-depth investigation:

Structural Pseudo-Classes

These enable styling based on the relationship or position of the element in the DOM structure.

  • :nth-child(n)
    • Target elements according to their order within a parent.
    • n can be a number, keyword (odd or even), or formula (2n+1).
    • Example:
li:nth-child(2) { color: red; }
  • :nth-of-type(n)
    • Though it only counts elements of the same type, it is similar to the :nth-child.
    • Example:
p:nth-of-type(odd) { font-weight: bold; }
  • :first-child and :last-child
    • Select the first or last child of a parent.
    • Example:
div:first-child { background: yellow; }
  • :first-of-type and :last-of-type
    • Select the first or last element of a specific type.
    • Example:
h1:first-of-type { text-transform: uppercase; }
  • :only-child and :only-of-type
    • Select elements that are the sole child or sole type within a parent.
    • Example:
p:only-child { font-size: 20px; }
  • :empty
    • Select elements with no children (including text nodes).
    • Example:
div:empty { display: none; }

User Interaction Pseudo-Classes

These change styles based on user actions.

  • :hover
    • When the mouse pointer is over an element, it styles it.
    • Example:
button:hover { background-color: blue; }
  • :focus
    • Target elements in focus (e.g., clicked or tabbed into).
    • Example:
input:focus { border: 2px solid green; }
  • :active
    • Applies styles when an element is activated (e.g., during a mouse click).
    • Example:
a:active { color: red; }
  • :visited and :link
    • Styles URLs visited are indicated by the notation :visited.
    • :link: Displays links that have not yet been visited.
    • Example:
a:link { color: blue; }
a:visited { color: purple; }
  • :target
    • styles an element that matches the URL fragment. (e.g., #section1).
    • Example:
#section1:target { background: lightyellow; }

Form-Related Pseudo-Classes

These are specific to form elements.

  • :checked
    • selects checked radio buttons or checkboxes.
    • Example:
input:checked { outline: 2px solid red; }
  • :disabled and :enabled
    • :disabled: Targets form elements that are disabled.
    • :enabled: Identifies activated form elements.
    • Example:
input:disabled { background: grey; }
  • :required and :optional
    • Required: Select the required fields on the form.
    • :optional: Selects available fields.
    • Example:
input:required { border: 1px solid red; }
  • :valid and :invalid
    • Form fields with valid input are targeted by :valid.
    • Fields with incorrect input are targeted by :invalid.
    • Example:
input:invalid { background: pink; }
  • :in-range and :out-of-range
    • focuses on input fields that contain values that fall inside or outside of the permitted range.
    • Example:
input:out-of-range { border-color: orange; }

Negation and Logical Pseudo-Classes

  • :not(selector)
    • chooses every element that does not fit the selector.
    • Example:
div:not(.active) { opacity: 0.5; }
  • :is(selector) and :where(selector)
    • Make writing complicated selectors simpler.
    • Whereas :where has 0 specificity, :is has normal specificity.
    • Example:
:is(h1, h2, h3) { color: blue; }

UI Element States

  • :read-only and :read-write
    • focuses on either editable or read-only form fields.
    • Example:
input:read-only { background-color: lightgray; }
  • :placeholder-shown
    • chooses the input fields that display the placeholder text.
    • Example:
input:placeholder-shown { color: gray; }
  • :default
    • Targets the default element of the form (e.g., default submit button).
    • Example:
button:default { border: 2px solid blue; }

Dynamic Pseudo-Classes

  • :root
    • matches to the root element of the document (usually <html>).
    • Example:
:root { --main-color: #333; }
  • :lang(language)
    • matches elements that have a particular language property.
    • Example:
p:lang(en) { font-style: italic; }

:target Pseudo-Class

In the current URL, the element that matches the fragment identifier (the portion of the URL that comes after the #) is styled using the :target pseudo-class. When surfing through anchor links, this is frequently used to highlight particular portions or in single-page websites.

How It Works:

The :target pseudo-class will choose the element with the matching id=”section1″ when a URL with a fragment identifier (for instance, example.com#section1) is accessed.

:lang(language) Pseudo-Class

The inherited language from a parent element or the element’s lang attribute can be used to style elements using the :lang() pseudo-class. Applying styles to material in several languages is much easier using this.

How It Works:

The browser determines if an element or its antecedents fit the language given in the :lang() pseudo-class by looking at the lang property.

  • :target and :lang() are both effective methods for enhancing user experience in particular situations.
  • Using URL fragments as a basis, the :target pseudo-class dynamically styles components.
  • Multilingual content can be made more usable by customizing styles for various languages using the :lang() pseudo-class.

You may precisely create dynamic, responsive, and visually appealing designs with additional HTML by utilizing these pseudo-classes.

Exploring the Pseudo-Elements

With CSS pseudo-elements, you can target particular text passages or insert content to design particular parts of an element. Although the single-colon syntax (:) may be supported by earlier browsers, they are defined with a double colon (::). This is a thorough examination of pseudo-elements:

Key Pseudo-Elements in CSS

  • ::before
    • Content is inserted before an element’s actual content by the ::before pseudo-element.
    • Syntax:
element::before {
  content: 'text';
  /* Additional styles */
}
  • ::after
    • Content is inserted after an element’s actual content by the ::after pseudo-element.
    • Syntax:
element::after {
  content: 'text';
  /* Additional styles */
}
  • ::first-line
    • The first line of text inside a block-level element is targeted and styled by the ::first-line pseudo-element.
    • Syntax:
element::first-line {
  /* Limited styles */
}
  • ::first-letter
    • In a block-level element, the ::first-letter pseudo-element targets the first letter of the first line of text.
    • Syntax:
element::first-letter {
  /* Limited styles */
}
  • ::placeholder
    • The form inputs’ placeholder text is styled by the ::placeholder pseudo-element.
    • Syntax:
input::placeholder {
  color: gray;
  font-style: italic;
}

Special Notes

  • Content Property for ::before and ::after:
    • These pseudo-elements must have the content property.
    • It can take attr() values, text, or URLs (url()).
    • Example:
a::after {
  content: ' (external link)';
}
  • Stacking Context:
    • Since pseudo-elements establish a new stacking context, z-index can be used to layer them.
  • Combining Pseudo-Elements and Classes:
    • For more dynamic styling, pseudo-elements and pseudo-classes can be combined:
a:hover::after {
  content: ' (hovered)';
  color: orange;
}
  • Browser Compatibility:
    • For contemporary browsers, use the double-colon syntax (::).
    • Legacy support is provided by the single-colon syntax (:) (:before, :after).

Key Takeaways

  • Pseudo-elements aid in the manipulation of particular textual or contentual elements.
  • By permitting both ornamental and practical styling, they improve user interface design.
  • For more precise control, they are used with classes, IDs, or pseudo-classes.

For more examples click here

Related Posts

Scroll to Top