Pseudo-class

A pseudo-class is a keyword beginning with a single colon that is added to a selector to target an element in a particular state or position, without needing an extra class or script. Examples are :hover, :focus, :checked and :nth-child(2).

Why it matters

Pseudo-classes let CSS react to user interaction and document structure. They style form validity, keyboard focus, visited links and list positions declaratively. They count as one class in specificity. Modern additions such as :is(), :where(), :not() and :has() make selectors shorter and allow parent-based styling.

Do not confuse them with pseudo-elements, which use two colons (::before, ::after) and style a generated part of an element rather than a state.

Example

a:hover, a:focus-visible { text-decoration: underline; }
li:nth-child(odd)        { background: #f5f5f5; }
input:invalid            { border-color: crimson; }
form:has(:invalid) button { opacity: .5; }

The last rule dims a form's button whenever any field inside is invalid.

Common mistakes

• Styling :hover without matching :focus-visible, leaving keyboard users without feedback.
• Relying on :hover for essential actions on touch devices.
• Writing :visited styles expecting to change layout; browsers restrict it for privacy.

Related

• CSS selector
• CSS specificity
• Form validation
• CSS

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.