Only APPLY the CSS to within an element

Question

nav ul {
}

nav ul li {
    margin-left: 7px;
}

nav.ul li a, a:link, a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
}

I only want the code above to style the elements within the <nav></nav>

Now however it does as well style the <a href=""> outside the nav element. How can I make sure it does what I want?

This: nav.ul li a, a:link, a:visited doesn't inherit. Should be: nav.ul li a, nav.ul li a:link, nav.ul li a:visited. — Jared Farrish
– Jared Farrish, Commented Jul 9, 2012 at 1:31
Ok, instead of adding this to all the answers I'll just put it here: There's a period (.) between nav and ul (it's nav.ul instead of nav ul) so that should be removed too, otherwise it's looking for a <nav class="ul"> when the earlier code sample has those as separate elements. — nbsp
– nbsp, Commented Jul 9, 2012 at 1:35
@nbsp - You are correct, the ` ` (space) selector is correct, the . (or subclass) is wrong and being perpetrated in most of the answers. — Jared Farrish
– Jared Farrish, Commented Jul 9, 2012 at 1:37

Ned Batchelder · Accepted Answer · 2012-07-09 01:32:30Z

5

The rules as you have them, will only apply within a nav element, except this:

nav.ul li a, a:link, a:visited {

This rule applies to a:link and a:visited. You want this:

nav.ul li a, nav.ul li a:link, nav.ul li a:visited {

answered Jul 9, 2012 at 1:32

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nbsp · Accepted Answer · 2012-07-09 01:32:49Z

3

It's because this line is incorrect:

nav.ul li a, a:link, a:visited {

It should be:

nav ul li a, nav ul li a:link, nav ul li a:visited {

After the comma (,) the CSS is applying to all a tags as there's not preceding selectors specified. Also you've got a period (.) in the nav ul in the first part.

answered Jul 9, 2012 at 1:32

nbsp

2,2911 gold badge15 silver badges12 bronze badges

Comments

j08691 · Accepted Answer · 2012-07-09 01:32:01Z

1

Change your rule:

nav.ul li a, a:link, a:visited

to:

nav.ul li a, nav.ul li a:link, nav.ul li a:visited

By omitting the nav.ul li part between the comma separation, you're effectively applying to to links outside of the nav.ul li.

answered Jul 9, 2012 at 1:32

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

mmontaruli · Accepted Answer · 2012-07-09 01:32:33Z

1

Your code is targeting a:link and a:visited without using descendent selectors. Using the following should fix your problem:

nav ul li a, nav ul li a:link, nav ul li a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

answered Jul 9, 2012 at 1:32

mmontaruli

134 bronze badges

1 Comment

nbsp Over a year ago

There's a period (.) between nav and ul (it's nav.ul instead of nav ul) so that should be removed too, otherwise it's looking for a <nav class="ul"> when the earlier code sample has those as separate elements.

ThinkingStiff · Accepted Answer · 2012-07-09 01:37:45Z

0

Make sure that all your selectors are preceded with nav ul li.

nav ul li a, nav ul li a:link, nav ul li a:visited {
    float: left;
    padding: 7px;
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

edited Jul 9, 2012 at 1:37

answered Jul 9, 2012 at 1:31

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Collectives™ on Stack Overflow

Only APPLY the CSS to within an element

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related