How can i access the first element with myabilities class?

Question

How can i access the first element with myabilities class in code given below?

<div class="span6">
      <h3 class="srvc-title">Responsive Design</h3>             
      <p class="srvc-detail">Crafting great experiences to suit the capabilities of every browser.</p>
      <p class="myabilities">The number of web-accessible devices is truly a wonder of our information age. It’s also a daunting canvas for design.</p>
      <p class="myabilities">Mobile phones, tablets, desktops — it’s hard to even categorise these days. I specialise in embracing the Web’s ubiquity. It’s my job to design for all experiences.</p>
      <p class="myabilities">Great design can’t be achieved in isolation. In fact, it’s two development practices that are the secret; feature detection and progressive enhancement. That means a multi-tiered design to match the capabilities of any browser.</p>
      <p class="myabilities">Complicated for us but for users — it just works.</p>
</div>

Here is the [reason](http://stackoverflow.com/a/18298969/1725764) why you can't use CSS3 pseudo-classes like `:nth-child` or `:first-of-type` to do this. — Hashem Qolami, Aug 18 '13 at 13:21
possible duplicate of [CSS3 selector :first-of-type with class name?](http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name) — Adrift, Aug 18 '13 at 13:33

Adrift · Accepted Answer · 2013-08-18T13:26:04.923

1

Unfortunately pseudo-classes like :nth-child and :nth-of-type will only look for elements based on their type, not their class or ID values like you're probably expecting. But given your mark-up (assuming it won't change) you could alternatively use:

div.span6 .srvc-detail + p {
    color: gold;
}

http://jsfiddle.net/E3GSV/3/

edited Aug 18 '13 at 13:26

answered Aug 18 '13 at 13:17

Adrift

58,167
12
92
90

2

`div.span .srvc-detail + p` is better, isn't it? – Hashem Qolami Aug 18 '13 at 13:19
Indeed it is, I overlooked that. Thank you! – Adrift Aug 18 '13 at 13:19
1

Thanks man... I got the idea but now instead of using css3 selectors. I'm simply assigning id to that first child and then accessing it. Because of the browser compatibility. – Adnan Ahmed Aug 18 '13 at 13:42
You're welcome - but note that the above selector is [compatible](http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC4QFjAA&url=http%3A%2F%2Fcaniuse.com%2Fcss-sel2&ei=69AQUqu6C-eEygHP5oE4&usg=AFQjCNFOB3idSe4b4mdRy20TKVRKas44Lw&bvm=bv.50768961,d.aWc) with IE 7 and above and pretty much all other browsers. – Adrift Aug 18 '13 at 13:47

How can i access the first element with myabilities class?

1 Answers1