Rick Donohoe
Rick Donohoe

Reputation: 7281

:first-child pseudo selector not targeting element

I can't get my head round why this first-child selector isn't working.

I've created a jsFiddle to show my code: http://jsfiddle.net/wDTvV/

Basically the following CSS rule isn't working:

.form-item-products:first-child {
  display: none;
 }

Does anyone know why? Have I screwed up my syntax for using pseudo selectors?

Thanks guys,

Rick

Upvotes: 0

Views: 179

Answers (2)

BoltClock
BoltClock

Reputation: 724592

The first child is not a .form-item-products, but rather #product-guide-wrapper, so your selector won't match.

As SLaks has mentioned, there isn't a :first selector in CSS like jQuery's. Given your structure, however, you should be able to use #product-guide-wrapper + .form-item-products instead.

Upvotes: 2

SLaks
SLaks

Reputation: 888303

:first-child can only match the first child element of its parent.
In your example, that's #product-guide-wrapper.

Unlike jQuery, CSS does not have a :first selector.

Upvotes: 2

Related Questions