Why this nested css code does not work?

Question

If I have something like the code below I would expect my link to be in red color with large fonts, it does not work, however.

.footer {
  text-align: center;
}

.footer a {
  color: red;
  font-size: 32px;
}

Live example: http://jsfiddle.net/avUT4/

I don't understand. I'm not good at css but why this code does not work?

Yoshi · Accepted Answer · 2013-01-03 18:21:16Z

3

There is some strange character in front of the .footer a rule. Try copying the code to jsbin.com and you'll see it marked by a red dot. This happens to me a lot when copying from jsfiddle. If the char is removed, all is good.

Here is your fiddle, without that character.

answered Jan 3, 2013 at 18:21

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

3 Comments

Yoshi Over a year ago

I'd rather say, it's a jsfiddle problem. Happens all the time if you copy from jsfiddle.

Jason Sperske Over a year ago

It's called a Byte Order Mark (Here it is when it's URL Encoded: %EF%BB%BF)

Stan Over a year ago

@Yoshi no man, it's Web Essentials 2012 for visual studio. It compiles LESS code to CSS and I wondered what is wrong with it since it looks correct but it's not.

PhonicUK · Accepted Answer · 2013-01-03 18:22:03Z

1

As far as I can tell you have a garbage character somewhere. I rewrote it and it's fine.

.footer
{
 text-align:center;   
}

.footer a
{
 color:red;
 font-size:32px;    
}

http://jsfiddle.net/avUT4/10/

answered Jan 3, 2013 at 18:22

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

1 Comment

Diodeus - James MacFarlane Over a year ago

Yeah, I think that's what I discovered through a different route.

Diodeus - James MacFarlane · Accepted Answer · 2013-01-03 18:22:59Z

0

I think this is a bug in jsfiddle. If you just define:

a {
  color: red;
  font-size: 32px;
}

It works. Then if you add .footer (just type it back in before "a"), it works still, but it won't work from the start point when ".footer a" is defined.

answered Jan 3, 2013 at 18:22

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Bob Balfe · Accepted Answer · 2013-01-03 18:25:26Z

0

try this:

.footer {
  text-align: center;
}

.footer a:link, a:active {
  color: red;
  font-size: 120px;
}

answered Jan 3, 2013 at 18:25

Bob Balfe

485 bronze badges

Collectives™ on Stack Overflow

Why this nested css code does not work?

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related