Search code examples
javascriptcsspseudo-class

How to dynamically change pseudo-class value in css

Let's say I have a navigation panel <div class="nav">.. with 5 <a> links.

CSS:
.nav a:nth-of-type(1) {
    text-decoration: underline;
}

I want to switch the underlined element by altering the CSS notation to:

CSS:
.nav a:nth-of-type(2) {
    text-decoration: underline;
}

Is it possible? (proof of concept)

EDIT:

I don't understand why the downwote? It is normal, legitimate question about whether it is possible to change the part in front of {} brackets -> change_this { stays_the_same } somehow, possibly with javascript.

Solution

  • Use jquery where you can select $(".nav a").eq(2).css("text-decoration","underline"). You won't be directly changing the css in the file. That isn't possible. But you can apply inline css to the element you want, which has higher precedence over the file css