Post
Ask Question

What are the distinctions between CSS pseudo-classes and pseudo-elements?

CSS pseudo-class

A CSS pseudo-class selector that maps objects according to additional conditions, and the tree does not need to be defined by text. The CSS pseudo-class allows you to create dynamic states of elements such as hover, active, and focus states, and elements in the fog tab tree cannot be accessed using other selectors without an addition Don't target them by identity or class, for example, the first or last child.

 

The pseudo-class starts with a colon (:). The syntax can be given as:

a:hover {
    color: black;
}
a:active {
    color: red;
}
a:focus {
    color: green;
}

These pseudo-classes change how connections are made in response to user actions.

  • : hover is for when the user hovers over an item but does not select it.
  • : usually used when the season is open or clicked.
  • : focus Applied when the item has keyboard focus.

: first-child pseudo-class

The ul li:first-child selector in the following example selects the first item in the order list and removes the bottom border from it.

ul li:first-child {
    border-bottom: none;
}

The:last-child pseudo-class

The:last-child pseudo-class matches text that is the last child of an object. The ul as: selector selects the last child unordered list in the example below and removes the top border from it.

ul li:last-child {
    border-top: none;
}

The:nth-child pseudo-class

CSS3 introduces a new:nth-child pseudo-class that allows the designer to target one or more children of a parent. The arguments for this selector can be given as: nth-child(N), where N is an argument that can be a number, a keyword (even or odd), or an expression of the form xn + y; where x and y are integers (eg 1n, 2n, 2n+1,)

Here is an example:

table tr:nth-child(2n) td {
    color: #f00;
}

The CSS:nth-child(N) selector is useful when you need to select elements that appear in the tree at certain times or patterns (even or odd positions)

: lang pseudo-class

Language pseudo-class: lang Allows creating a selector based on the language configuration of a given object. The: lang pseudo-class in the following example defines a directive for the element that specifies this language value.



q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */

CSS pseudo-elements

CSS pseudo-elements are a style information method that is not explicitly defined by their position in the text tree.

What are pseudo-elements

CSS pseudo-elements allow you to create part of an element or object without adding an ID or class. This is useful when you want to make a paragraph in a paragraph just to create a dropout effect, or when you just want to add something before or after the element of the style sheet. CSS3 introduces a new double slash (::) syntax for pseudo-elements to separate pseudo-elements from pseudo-classes.

The new syntax for pseudo-elements could be: selector::pseudo-element { property: value; }

::first line pseudo-element

The ::first-line pseudo-element applies a custom style to the first line of text. The style rule in the following example creates the first line of text in a sentence length of the first line depends on the size of the browser window or the availability of elements.

p::first-line {
    background-color: #000000;
    border-bottom:2px solid #f00;}

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of the first line of a text. The style rules in the following example formats the first letter.

p::first-letter {
    color: #000000;
    font-size: xx-large;
}

::before and ::after pseudo-elements

The ::before and ::after pseudo-elements can be used to insert struct elements before or after struct elements The Content CSS tool is used with pseudo-content to insert the rendered content. This is useful for additional decoration of rich content that should not be included in the actual markup of the page. You can use pseudo-points to add regular text or draw objects such as images and other objects.

h1::before {
    content: url("images/deepak.gif");
}
h1::after {
    content: url("images/rawat.gif");
}

Conclusion :

Pseudo-elements and pseudo-classes are powerful tools for creating web pages that can help you make your CSS code more efficient and manageable.


Similar Articles