styling link using css in this particular html structure

Question

HOw to style link with class selected under this html structure

<li class="submenu_items" style="display: list-item;">
        <ul>
            <li>
                <a class="selected" href="/page">Page</a>
            </li>
        </ul>
    </li>

Generally, you can use this: `.submenu_items > ul > li > a.selected` — Itay, Feb 24 '14 at 12:18
Why everyone using `CSS Specificity` concept here; Even `.class` is already defined here? — Kheema Pandey, Feb 24 '14 at 12:36

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

This should do it for you:

.submenu_items ul li a.selected{
     /* your CSS properties here */
}

You can also use the > operator to denote a direct descendant.

There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity

edited May 23 '17 at 12:20

Community

1
1

answered Feb 24 '14 at 12:18

SW4

69,876
20
132
137

score 1 · Answer 2 · answered Feb 24 '14 at 12:19

1

Use the below to style selected

.submenu_items ul li > a.selected{/* your code goes here. */}

Hope this helps.

answered Feb 24 '14 at 12:19

Nitesh

15,425
4
48
60

score 1 · Answer 3 · answered Feb 24 '14 at 12:21

1

To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:

.submenu_items ul li a.selected{
/* Add your CSS */
}

answered Feb 24 '14 at 12:21

d.abyss

204
1
4
26

styling link using css in this particular html structure

3 Answers3