CODEWITHSUNDEEP
css
John
John

Reputation: 3050

Only APPLY the CSS to within an element

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?

Upvotes: 2

Views: 118

Answers (5)

ThinkingStiff
ThinkingStiff

Reputation: 65341

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;
}

Upvotes: 0

nbsp
nbsp

Reputation: 2291

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.

Upvotes: 3

mmontaruli
mmontaruli

Reputation: 13

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;
}

Upvotes: 1

Ned Batchelder
Ned Batchelder

Reputation: 375484

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 {

Upvotes: 5

j08691
j08691

Reputation: 207861

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.

Upvotes: 1

Related Questions