Why Is a Pseudo-Class So Called

Why is a pseudo-class so called?

In CSS terms, a class is a selector that starts with a full stop, e.g.

.foo { ... }

It would be used in the form

<div class="foo">

This use of "class" is more in the sense "a set or category of things having a common characteristic and differentiated from others by kind or quality", rather than borrowing from OO terminology.

A pseudo class is "not quite a real one" as the user agent defines when and/or how much content qualifies (like :hover, :active, etc).

What is the difference between pseudo-classes and pseudo-elements?

From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-class :

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Examples:

• :active
• :checked
• :nth-child()
• :first
• :hover

Pseudo-elements ::

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

Examples:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

As stated by @stephanmg:

In practice ::before is used as :before and ::after is used as :after
because of browser compatibility. Both are pseudo-elements, but may
look like pseudo classes. This might be confusing if you read CSS
code.

Confused by CSS pseudo-class :active

There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:

The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.

What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.

Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:

p:active {
    color: red;
}

And any paragraph you click will flash its text red.

Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.

What's the point of the :link pseudo-class?

The a:link selector lets you set the styles on <a> tags that actually link somewhere.

Bare <a> tags without an href attribute are traditionally used as markers in a document; setting the location to document.html#foo will jump you to wherever <a id="foo"> is in the document. It is, after all, called an "anchor" tag for a reason.

Traditional HTML may look something like this:

<h2>Navigation</h2>
<a href="#ch1">Chapter 1</a>

...

<h3><a id="ch1">Chapter 1</a></h3>
<p>It was the best of times...</p>

Subsequent HTML standards let you use the document.html#thing syntax to jump to any element with the attribute id="thing", but it wasn't always the case.

Structural Pseudo Classes and attribute selectors doesn't work together

Pseudo-classes use only one colon, so it's :first-child, not ::first-child.

But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.

You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:

.field input[type='file'] {
    display:block;
}

.field input[type='file'] ~ input[type='file'] {
    display:none;
}

This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.

CSS :: vs : -- pseudo-element vs pseudo-selector?

Pseudo-classes (:) allow you to style the different states of an element e.g. when you hover over it, when it is disabled, when it is the first child of its parent, etc.

Pseudo-elements (::) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc.

Originally they all used a single colon, but CSS3 introduced the double colon to separate the two.

Functionality of pseudo class in :not pseudo class selector - css issue

Solution is: you CAN use pseudo classes, you just cannot have them combined with a real class.

So

.foo:not(.foo:active) {}

doesn't work, but

.foo:not(:active) {}

works just fine :)

This didn't solve my problem, but I guess it's important to understand. I'd still have to mix classes and pseudo classes to achieve my goal.

Conclusion: you can't do this without javaScript (yet)

Thanks to BoltClock who answered this in a comment to the original post :)

You've run into the exact same issue that somebody else did the other day: you can use pseudo-classes in :not(), but in this case you're combining both a class and a pseudo-class, which is not OK

CSS a property for specific id pseudo class?

IDs, classes and pseudo-classes are different things, and CSS has different notations for all three:

• ID selector
• Class selector
• Pseudo-class

If you want to apply this particular :hover (which is a pseudo-class) only when a is a div with class router_li (as in <div class="router_li">), use

.router_li a:hover

That's a class, though; if it's an ID (as in <div id="router_li">), use

#router_li a:hover

In both cases, router_li is not a pseudo-class since it is defined in the markup and not in CSS, so the :router_li in your code is invalid. Also notice that the ID/class (whichever it is) comes before the a:hover - this is called a contextual selector (a only when it's in a certain div).

---

Related Topics