Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS pseudo-class vs. pseudo-selector

This is a bit of a pedantic question, but perhaps worth asking. Is there, mechanically, a difference between a pseudo-class and a pseudo-selector in CSS? We use the term interchangeably around here, but it seems that there's a reason for the two terms. Is there any use to differentiating the two?

like image 400
Joe Mastey Avatar asked Jun 24 '10 15:06

Joe Mastey


People also ask

What is the difference between pseudo class and pseudo-element selector?

Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state to the DOM. Pseudo-elements act as if you had added a whole new element to the DOM, and enable you to style that.

What is the difference between a CSS class and a pseudo class?

The Difference Between Pseudo-classes and Pseudo-elements of CSS Properties. First, Let's have a look at the definition of Pseudo-classes and Pseudo-elements from W3C: CSS Pseudo-classes are used to add special effects to some selectors. CSS Pseudo-elements are used to add special effects to specific selectors.

What is pseudo class selector in CSS?

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

What is a pseudo class selector?

CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this: a:hover { /* your style here */ }


2 Answers

A pseudo-class is a specified thing, while pseudo-selector is a made up word.

(Meanwhile, a pseudo-class matches an element when certain conditions are met (e.g. the mouse is pointing at it, or it is the first child of its parent), while a pseudo-element is something that can be matched but isn't a real or whole element, such as "Thing before an element" or "First line of text in an element".)

like image 59
Quentin Avatar answered Oct 05 '22 13:10

Quentin


pseudo-selector does make the odd appearance on the W3C site, but my initial search suggests that it is an old old term that has now been replaced with pseudo-class:

pseudo-selector

the page pseudo-selector :first

http://www.w3.org/TR/2004/CR-css-print-20040225/#section-selectors

CSS has a "lang" pseudo-selector that automatically uses the appropriate attribute depending on the media type

http://www.w3.org/TR/xhtml-media-types/

pseudo-class

5.11.4 The language pseudo-class: :lang

http://www.w3.org/TR/CSS2/selector.html#lang

...and many more.

Pseudo-elements and pseudo-classes

Then there's the descriptions for pseudo-elements and pseudo-classes:

http://www.w3.org/TR/CSS2/selector.html#pseudo-elements

So it looks to me as though pseudo-selectors are no longer in vogue...

like image 28
Mike Avatar answered Oct 05 '22 11:10

Mike