Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Apply css using the selector

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #145172
    gowda24
    Participant

    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.

    #145177
    Paulie_D
    Member

    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.

    #145183
    dgriesel
    Participant

    how about :first-child?

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

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

    #145184
    Paulie_D
    Member

    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.

    #145215
    HugoDB
    Participant

    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;
    }‚Äč

    #145235
    gowda24
    Participant

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

    #145242
    SilverSerpent
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.