Is It Possible Using Current Browsers to Use Pseudo-Classes to Detect First and Last of a Certain Class

Is it possible using current browsers to use pseudo-classes to detect first and last of a certain class?

Currently there is no shortcut syntax or pseudo-class in CSS for finding the first or last child having a certain class.¹

I use an overriding technique to style the first child with a certain class, which I describe in heavy detail in this answer. However, due to how sibling combinators work, this technique cannot be applied for the last child having a certain class.

I do not know of any pure CSS way to target the last child having a certain class. You have to use JavaScript or restructure your markup in order to do that. If there is exactly one such element, then using jQuery you can simply use the :last selector to add a class, which you can then style with CSS:

$('.column:last').addClass('last');

.column.last { background:red; }

jsFiddle preview

---

¹ _{There are some new pseudo-classes being proposed in Selectors 4 which would fit the bill, but browsers won't start implementing it for another few months or until the spec is more stable, and even then we don't know if these pseudo-classes are going to stick because the current syntax looks rather awkward:}

:nth-last-match(1 of .column) { background:red; }

when to use pseudo-classes and when to use pseudo-elements selectors in CSS

The single colon syntax is an older implementation. In general, there are pseudo-elements :: & pseudo-classes :, and they are not identical. In this case though, browsers still support the outdated single-colon syntax.

This means that in your example with :before/::before, it will not make a difference to the outcome, but in general you should use the double colon syntax, because before & after are pseudo-elements, not pseudo-classes.

Read more on MDN.

How to detect if browser support specified css pseudo-class?

You can simply check if your style with pseudo-class was applied.

Something like this: http://jsfiddle.net/qPmT2/1/

:last-of-type Pseudo-Class Not Acting as Expected

The :nth-of-type() family of pseudo-classes only look at an element's type, that is, its tag name. They do not filter by your class selector or any other selector.

Therefore, your statements:

I'm applying :last-of-type to an element that is clearly as such. Check out the final div.info

Are contradictory. There's a div.center after that, making that the last div, not your div.info.

You cannot currently use CSS selectors to find your last div.info; you'll have to resort to adding an extra class and/or using JavaScript.

CSS multiple pseudo classes and pseudo elements

Yes it works, see the snippet below.

footer ul.footer-menu li:not(:first-child):after {

    content: 'added some text';

    color: red;

}

<footer>

    <ul class="footer-menu">

        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>

        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>

        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>

        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>

    </ul>

</footer>

What happens when the browser doesn't support a CSS pseudo-class?

Browsers currently make no distinction between unrecognized or unsupported selectors, and invalid selectors. If a browser recognizes a selector, generally it'll have implemented it to the best of its ability (and any behavior that's not to spec can be classified as a bug on its bug tracker), even if it doesn't implement all other features in the same level of Selectors (as is currently the case with :dir() for example, and historically Internet Explorer 7 and 8 with level 3 attribute selectors, and Internet Explorer 6 with the universal selector). If it doesn't recognize the selector, it follows CSS2.1 §4.1.7 to the letter and drops the entire ruleset, no questions asked. Notice that it says

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

which implies that if a user agent cannot parse a selector, it must therefore be invalid CSS2.1 (or invalid in some other level of Selectors); and inversely that if it can parse a selector, it must therefore be valid. But this assumes the user agent conforms fully to the standard; we all know that in reality, different implementations have different levels of conformance to each standard, and certain implementations even have their own vendor-specific selectors which are not part of any standard. So I treat this as "When a user agent cannot parse the selector" without the parenthetical, and I imagine browser vendors do the same.

In fact, Selectors itself makes no distinction between a pseudo-class token with an ident or function that doesn't correspond to a valid pseudo-class, and a series of characters that cannot even be parsed as a pseudo-class — they're both equally invalid — see section 12 of css3-selectors and section 3.9 of selectors-4. Essentially, this means that the current browser behavior is in full compliance with the standard, and not just an arbitrary decision agreed upon by browser vendors.

I've not heard of any browser that recognizes a pseudo-class as valid for the purposes of error handling, and proceeds to ignore either just that pseudo-class or the entire complex selector (leaving other complex selectors in the selector-list unaffected). WebKit did use to have a really bad habit of accepting CSS rules with unrecognized pseudo-elements, allowing things like ::selection, ::-moz-selection, which proved useless anyway because every other layout engine followed the spec more strictly. I believe WebKit no longer does this, however, but you know how WebKit is with these things. But AFAIK it has never done this with pseudo-classes.

On the standards side, selectors-4 appears set to change this with the introduction of the static and dynamic profiles. My email on the subject was addressed in a CSSWG telecon; you can find the minutes here (search for "Behavior of Selectors not in Fast Profile"). However, it was resolved that selectors not in the dynamic (previously fast) profile should be treated as invalid and cause the entire CSS rule to be dropped, as usual. See section 2.1:

CSS implementations conformant to Selectors Level 4 must use the dynamic profile for CSS selection. Implementations using the dynamic profile must treat selectors that are not included in the profile as unknown and invalid.

CSS3 pseudo class not first and last child

Two ways :

you can set a generic rule, and then override it for :first-child and :last-child items. This plays to CSS strengths:

 li { background: red; }
 li:first-child, li:last-child { background: white; }

Or, you can use the :not keyword combined combining the two:

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

Of the two, I personally prefer the first - it's easier to comprehend and maintain (in my opinion).

Twitter Bootstrap: safe to use pseudo classes?

There is no :last pseudo-class in css. You may be thinking of the :last-child pseudo-class, which is supported in IE8 and up, as well as all modern versions of Chrome, Firefox, and Safari, as well as modern mobile browsers.

Twitter Bootstrap was made as a starting point, and so long as IE7 support is not a concern, using pseudo-classes like :last-child is safe. Be sure to reference the specific pseudo classes browser support though. Here's a nice list: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

EDIT: I had first-child and last-child mixed up, last-child is ie9 and up.

Querying pseudo classes of an element in pure Javascript

You can use

element.matches(':hover')

var box = document.getElementById("box");

var msg = document.getElementById("msg");

setInterval(() => msg.textContent = box.matches(':hover') ? "in" : "out", 1000);

<div id="box" style="width: 100px; height: 100px; background-color: red; "></div>

<div id="msg"></div>

---

Related Topics