Pseudo elements

A pseudo-element is a keyword appended to the end of a selector that allows you to style specific parts of the selected element

Customize the appearance of the scroll bar

In CSS, we can customize the appearance of the scrollbar using -webkit-scrollBar. This property provides seven pseudo-elements:

  • ::-webkit-scrollbar: The entire scroll bar
  • ::-webkit-scrollbar-button: scroll bar button (down arrow)
  • ::-webkit-scrollbar-thumb: Scroll slider on scroll bar
  • ::-webkit-scrollbar-track: Scroll bar track
  • ::-webkit-scrollbar-track-piece: Scroll bar The part of a track without a slider
  • ::-webkit-scrollbar-corner: The part where both vertical and horizontal scroll bars meet
  • ::-webkit-resizer: Partial styles of the intersection parts of some elements (similartextareaThe draggable button of
html {
  --maxWidth: 1284px;
  scrollbar-color: linear-gradient(to bottom, #ff8a00.#da1b60);
  scrollbar-width: 30px;
  background: #100e17;
  color: #fff;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}

html::-webkit-scrollbar-thumb {
  background: -webkit -
    gradient(linear, left top, left bottom, from(#ff8a00), to(#da1b60));
  background: linear-gradient(to bottom, #ff8a00.#da1b60);
  border-radius: 30px;
  -webkit-box-shadow: inset 2px 2px 2px rgba(255.255.255.0.25),
    inset -2px -2px 2px rgba(0.0.0.0.25);
  box-shadow: inset 2px 2px 2px rgba(255.255.255.0.25),
    inset -2px -2px 2px rgba(0.0.0.0.25);
}
html::-webkit-scrollbar-track {
  background: linear-gradient(
    to right,
    #201c29.#201c29 1px.#100e17 1px.#100e17
  );
}
Copy the code

With these pseudo-elements, you can create your own scrollbar look, as in this example:

::first-line

::first-line pseudo-elements are used to add special styles to the first line of text.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
Copy the code

Note :: :first-line pseudo-elements can only be applied to block-level elements.

The following attributes apply to ::first-line pseudo-elements:

  • Font properties
  • Color attribute
  • Background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter

The ::first-letter pseudo-element is used to add a special style to the first letter of text.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
Copy the code

Note :: :first-letter pseudo-elements only apply to block-level elements.

The following attributes apply to ::first-letter pseudo-element:

  • Font properties
  • Color attribute
  • Background properties
  • Margin property
  • Inside margin property
  • Border attribute
  • text-decoration
  • Vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

::before

The ::before pseudo-element can be used to insert something before the element content.

h1::before {
  content: url(smiley.gif);
}

<h1This is a title </h1>
<p>::beforePseudo-elements insert content before the content of an element. </p>
<h1This is a title </h1>
Copy the code

::after

::after pseudo-elements can be used to insert some content after the element content.

h1::after {
  content: url(smiley.gif);
}

<h1This is a title </h1>
<p>::afterPseudo-elements insert content after an element. </p>
<h1This is a title </h1>
Copy the code

::selection

:: Selection Pseudo-elements match parts of the element selected by the user

The following CSS properties can be applied to :: Selection:

  • color
  • background
  • cursor
  • outline
::selection {
  color: red; 
  background: yellow;
}
Copy the code

::placeholder

Select placeholder text for a form element, which allows developers and designers to customize the style of placeholder text.

input::placeholder {
  color: red;
  font-size: 1.2 em;
  font-style: italic;
}
<inputPlaceholder =" I'm red!" >Copy the code

::backdrop

Instantly render boxes under any element that is in full-screen mode (and above all other elements that are lower in the heap).

video::backdrop {
  background-color: # 448;
}
Copy the code

Note the effect of backdrop backdrop, dark blue and gray on the upper and lower parts. This area is usually black, but the CSS statement above modifies its appearance.

::grammar-error

Applies to a text segment that the browser identifies as syntactically incorrect

Only a small amount of CSS can be applied to the :: grammer-error selector

  • color
  • background-color
  • cursor
  • text-emphasis-color (en-US)
  • text-shadow
  • outline
  • text-decoration

::slotted()

Use to select the elements to be placed in the HTML template

::cue (:cue)

Matches the WebVTT prompt in the selected element. This can be used to use captions and other cues in media on VTT tracks.

Only a small subset of CSS attributes can be used with :: cue pseudo-elements:

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • line-height
  • white-space
  • text-combine-upright (en-US)
  • ruby-position (en-US)

::marker

Select a marker box for a List item, which usually contains a bullet or number. It works on any element or pseudo-element with display: list-item set

ul li::marker {
  color: red;
  font-size: 1.5 em;
}
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
Copy the code

::spelling-error

Represents a text segment marked by the browser as incorrectly spelled.

::spelling-error {
  color: red;
}
Copy the code

Only a small number of CSS properties are available for ::spelling-error pseudo-element selector:

  • color
  • background-color
  • cursor
  • caret-color
  • outline
  • text-decoration
  • text-emphasis-color (en-US)
  • text-shadow

CSS pseudo-classes

CSS pseudo-classes are keywords added to the selector that specify the particular state of the element to be selected

The selector example Case description
:is .abc:is(span, p) Select elements labeled SPAN and P in the class name ABC
:focus-within form:focus-within Indicates that an element gains focus, or that a descendant of the element gains focus
:fullscreen div:fullscreen Fullscreen applies to elements that are currently in full-screen mode
:dir() < div dir = “LTR” > test < div dir = “auto” > ע ִ ב ְ ר ִ י ת < / div > < / div > :dir(LTR) matches div with content test.
:default input:default This selector can be used on <button>, <input type=”checkbox”>, <input type=”radio”>, and <option>. Grouping elements that allow multiple selections can also have multiple defaults, that is, they can have multiple items that were originally selected. In this case, all defaults are represented using the :default pseudo-class.
:blank input:blank Select input fields where user input is empty, such as <input> and <textarea>).
:any-link a:any-link Matches every <a>, <area>, or <link> element that has an href attribute. Therefore, it matches all :link or :visited.
:hsa a:has(> img) Only <a> elements that directly contain children of <img> will be matched
:active a:active Select the link for the activity.
:checked input:checked Select each selected <input> element.
:disabled input:disabled Select each of the disabled <input> elements.
:empty p:empty Select each <p> element that has no child elements.
:enabled input:enabled Select each enabled <input> element.
:first-child p:first-child Select each <p> element that is the first child of its parent.
:first-of-type p:first-of-type Selects each <p> element of the first <p> element that is its parent.
:focus input:focus Select the <input> element that gets focus.
:hover a:hover Choose to hover over the link.
:in-range input:in-range Select the <input> element with values in the specified range.
:invalid input:invalid Select all <input> elements with invalid values.
:lang(language) p:lang(it) Select each <p> element whose lang attribute value begins with “it”.
:last-child p:last-child Select each <p> element that is the last child of its parent.
:last-of-type p:last-of-type Selects each <p> element of the last <p> element that is its parent.
:link a:link Select all unvisited links.
:not(selector) :not(p) Select each element that is not a <p> element.
:nth-child(n) p:nth-child(2) Select each <p> element that is the second child of its parent.
:nth-last-child(n) p:nth-last-child(2) Select each <p> element that is the second child of the parent, counting from the last child.
:nth-last-of-type(n) p:nth-last-of-type(2) Select each <p> element of the second <p> element as parent, counting from the last child element
:nth-of-type(n) p:nth-of-type(2) Select each <p> element that is its parent’s second <p> element.
:only-of-type p:only-of-type Select each <p> element that has a unique <p> element as its parent.
:only-child p:only-child Select the <p> element that is the only child of its parent.
:optional input:optional Select the <input> element without the “required” attribute.
:out-of-range input:out-of-range Selects <input> elements whose values are outside the specified range.
:read-only input:read-only Select the <input> element that specifies the “readonly” attribute.
:read-write input:read-write Select the <input> element without the “readonly” attribute.
:required input:required Select the <input> element that specifies the “required” attribute.
:root root Select the root element of the element.
:target #news:target Select the currently active #news element (click the URL that contains the anchor name).
:valid input:valid Select all <input> elements that have valid values.
:visited a:visited Select all visited links.