Select the first CSS element using a pseudo class

Question

I have the following structure:

<div class="myClass">1</div>
<div class="myClass">2</div>

How can I select the first element matched by .myClass?

I know that I can do: [PARENT OF .myClass] .myClass:first-child {/* rules */} but I am curious if there is a pseudo CSS class that selects the first element matched by the selector.

Is that possible? How?

The jQuery selector would look like this: .myClass:first, but :first seems not to work in CSS.

If there aren't more groups of the same class, and if the first is the first child of a parent, you can use first-child, otherwise there is the nth-child, which is somewhat more customizable, or the nth-of-type selector that isn't supported in all older browsers. — adeneo
– adeneo, Commented Nov 30, 2013 at 19:26
Given that you have jQuery, why not $('.myClass:first') or $('.myClass').first() (or other variations thereof)? Or, in plain JavaScript: document.querySelector('.myClass')? — David Thomas
– David Thomas, Commented Nov 30, 2013 at 23:32

Ale · Accepted Answer · 2013-11-30 19:44:55Z

1

Okay, I'm not sure, but this might work for you.

some.great-selector:first-of-type {
  /* Your rules here */
}

This will match only first child that matches some.great-selector in each parent node. This is somewhat different from what :first does in JQuery, but might be still useful, e.g. in conjunction with parent > selector.

answered Nov 30, 2013 at 19:44

Ale

2,02220 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alessandro Incarnati · Accepted Answer · 2013-11-30 23:26:16Z

1

You could use:

.myClass:first-of-type {
      background-color:#233423;
      color:#FFFFFF;
    }

http://jsfiddle.net/65adr/44/

or you can give a look here for other alternatives:

http://reference.sitepoint.com/css/css3psuedoclasses

answered Nov 30, 2013 at 23:26

Alessandro Incarnati

7,2623 gold badges41 silver badges57 bronze badges

Comments

Jeffpowrs · Accepted Answer · 2013-11-30 19:29:03Z

0

:first-child is the closest you will get. Though it is well supported if you're looking for something that will work in legacy browsers.

If you want to achieve support in legacy browsers you can apply a style to all elements with a particular class name and then remove it for all sibling classes as so:

.my-class {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

.my-class + .my-class {
  border-top: none;
}

A rather arbitrary example but you'll get the point.

answered Nov 30, 2013 at 19:29

Jeffpowrs

4,6004 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

Select the first CSS element using a pseudo class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related