CODEWITHSUNDEEP
htmlcsscss-selectors
Clay Banks
Clay Banks

Reputation: 4581

CSS selector not changing link color

My html and css files are set up correctly, however I'm having trouble with a certain selector.

I have the html here:

<span id="bottom_nav_bar"> 
    <a href="#">Link 1</a>
</span>

And the CSS here:

a#bottom_nav_bar{ color: red; text-align: center; }

However, my span is not getting selected and I can't figure out why. Any ideas?

Upvotes: 1

Views: 176

Answers (5)

grigno
grigno

Reputation: 3198

try this:

#bottom_nav_bar a{ color: red; text-align: center; }

Upvotes: 1

Fabi
Fabi

Reputation: 274

Your link don't have this id, so it can't work...

Put your id to the a-tag ;)

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

You're not targeting the a element. Your CSS selector is attempting to style an a element with an id of "bottom_nav_bar". In your HTML, however, the span has this ID and the anchor element is within the span.

To target the anchor tag, change your CSS selector to:

#bottom_nav_bar a { color: red; text-align: center; }

To target just the span, change a#bottom_nav_bar to span#bottom_nav_bar.

For more information about selectors, please see http://www.w3.org/TR/css3-selectors/#selectors

Upvotes: 3

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

use this to select the span link

span #bottom_nav_bar a{ color: red; text-align: center; }

Upvotes: 0

Adrift
Adrift

Reputation: 59769

It should instead be:

#bottom_bar_nav a {
    color: red;
    text-align: center;
}

As the <a> is a descendant of the <span> with the ID bottom_nav_bar

Upvotes: 3

Related Questions