2

I have two <a> in a <p> and I want to assign them different borders when selected.

When the user clicks on a <a> a JavaScript sets the class to "selected" and the border shall turn to green if it is the first <a> but if the second <a> is clicked and assigned class="selected" the border shall turn to red.

What I would like to do in CSS is something like:

a:first-child.selected {border-color:green}
a.selected {border-color:red}

But that does not work.

There are a lot of examples out there which describes how to select the first-child of a specific class but none which describes how to select the first-child of a certain tag IF it has a certain class.

Is this possible to achieve at all?

What I have done now is to set the first <a> as class="yesselected" and if the second is clicked it will have class="noselected".

But i would really like to know if it is possible to select a tag if it is the first one and it has a certain class

Albzi
  • 15,431
  • 6
  • 46
  • 63
Fredrik D
  • 23
  • 1
  • 7
  • Have a look at [CSS3 selector :first-of-type with class name?](http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name) – RienNeVaPlu͢s Nov 21 '13 at 16:45
  • 1
    So, that *should* work. Is the `a` *really* the `:first-child`, or simply the `a:first-of-type()` Can you show your HTML? And the JavaScript that's adding/changing the class-names? Also, [it works in this (simple) demo](http://jsfiddle.net/davidThomas/DDtuZ/). – David Thomas Nov 21 '13 at 16:45
  • I updated my question sice all tags were lost. – Fredrik D Nov 21 '13 at 16:48
  • RienNeVaPlus: That answers my question! I was aware of the selector but didn't know that it was possible to also include a class in that. – Fredrik D Nov 21 '13 at 16:53

2 Answers2

1

I originally thought your css was slightly off, you needed the pseudo element at the end. That appears to be wrong in the case of pseudo classes. Thanks to @BoltClock's a Unicorn

a.selected:first-child {border-color:green}
a.selected {border-color:red}

However I have to ask if your css sets the border to appear somewhere else with all of the needed border value declarations?

a{border: 1px solid transparent;}
a.selected:first-child {border-color:green}
a.selected {border-color:red}

http://jsfiddle.net/8hPw8/

DrCord
  • 3,917
  • 3
  • 34
  • 47
  • It's not a pseudo-element - it's a pseudo-class, so it doesn't matter whether you put it before or after the class selector. – BoltClock Nov 21 '13 at 16:47
  • really? that's interesting and not how I understood the spec. – DrCord Nov 21 '13 at 16:48
  • 1
    Yup. It says [here](http://www.w3.org/TR/selectors/#first-child-pseudo) that it's a pseudo-class. A pseudo-class and a pseudo-element while similarly named are not the same thing - see [this question](http://stackoverflow.com/questions/8069973/what-is-the-difference-between-a-pseudo-class-and-a-pseudo-element-in-css). – BoltClock Nov 21 '13 at 16:50
  • Or if you were referring to the ordering of selectors - it's not explicitly mentioned anywhere that you can have them in any order, but [here](http://www.w3.org/TR/selectors/#selector-syntax) you can find a definition for "simple selector". – BoltClock Nov 21 '13 at 16:54
  • @DrCord: You are absoutley correct. From what I have read I simply assumed that a.classname:first-of-child would select the first a-tag with class=selected which would not work if my second a-tag had class=selected. The reason why I need to be so specific is because it is only small a part of a quite large website. – Fredrik D Nov 22 '13 at 07:07
0

Shouldn't it be a.selected:first-child ?

Edit: Boltclock is right, the ordering doesn't matter.

It's to do with the exact behaviour of the :first-child selector. 

a:first-child

refers to the a tag that is the first child of it's parent element and not to the first a child of an element.

tewathia
  • 6,890
  • 3
  • 22
  • 27