CODEWITHSUNDEEP
htmlcsscss-selectors
jaekie
jaekie

Reputation: 2303

CSS selector applying style to only parent link

I'm having some problems getting my CSS selector to pick the parent link only.

<style>
.sidebar .nav li a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}
</style>

<div class="sidebar">
<ul class="nav sidenav">
    <li>
        <a href="#">Menu1</a>
        <ul class="nav">
            <li><a href="#">Item1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu2</a>
        <ul class="nav">
            <li><a href="#">Item1</a></li>
        </ul>
    </li>
</ul>

Unfortunately.. the style applying to ALL links in the nav, my alternative is to put a class on all of the links I want styled, but rather not have to do that.

http://jsfiddle.net/bFxm4/

Upvotes: 1

Views: 9499

Answers (5)

mate64
mate64

Reputation: 10072

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by >.

CSS 2.0 Specifications - Selectors, 5.6 Child selectors

.sidebar .nav > li > a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}

Demo

Upvotes: 8

Jake Aitchison
Jake Aitchison

Reputation: 1099

try this:

.sidebar > .nav > li > a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}

hope this helps

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

If you're trying to get the style to apply to .sidebar .nav li a only, and not the links in the nested lists, you can change your selector to read like this: .sidebar .nav > li > a. This targets <a> tags that are direct descendants of <li> tags only, and only those that are in the top level list. It won't go any deeper.

Upvotes: 0

HighHopes
HighHopes

Reputation: 2102

I think that putting a class on all of the parent links is fine. Especially is you are using some loop on the back end to generate the html, then adding a class to each one is simple.

Upvotes: 0

Guillaume Lhz
Guillaume Lhz

Reputation: 904

this work DEMO :

.sidebar .nav.sidenav > li > a {
    background-color: transparent;
    border-right: 1px solid #563D7C;
    color: #563D7C;
    font-weight: bold;
}

The ">" means : picks the ones which are directly child

Upvotes: 1

Related Questions