Apply css using the selector

[gowda24]

I want to apply color orange to only the second li element containing the text

“list item 2”. How can i apply css to this li without using the nth selector.

using adjacent (+) selector applies color to both 2 and third.

code.

[Paulie_D]

Not much you can do in CSS based on the ‘content’ of the list item.

In fact, without JS I don’t think you can target that specific item at all (based purely on basic selectors).

With more information…such as specific attributes..it might be possible but it’s hard to comment without knowing WHY this is so important.

[dgriesel]

how about :first-child?

http://codepen.io/anon/pen/FoqpG

Although that selector is very specific which is not a good idea in general…

[Paulie_D]

Oh…that’s sneaky.

Ugly, but sneaky. :)

Frankly, I think I would just slap a class on the 2nd li and be done with it.

I’d be interested to know WHY this is specifically required as it’s very inflexible.

[HugoDB]

can use these as faux n-th childs

/* equivalent to "ul li:nth-child(2)" */
ul li:first-child + li {
property: value;
}
/* equivalent to "ul li:nth-child(3)" */
ul li:first-child + li + li {
property: value;
}​

[gowda24]

using :nth-child(3), we can apply but, i am looking if there is any other way using the css selectors.

[SilverSerpent]

The only thing I can think of short of a class is ul > li + li { color: orange } which will put everything from the second item on to be orange, then ul > li + li + li { color: black } which will set everything from the third item on back to black, effectively just coloring the second item. But I do agree with Paulie_D, a class would be the way to go unless for some reason you don’t have access to the HTML

[Author]

Posts