CSS Pseudo classes

silvine · 06-02-2013 11:48am #1

Can someone help me with this?

Here's my HTML


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
        <div>
		<p><a href="http://www.mylink.com">link one</a>
		<p><a href="http://www.mylink.com">link two</a>
                <p><a href="http://www.mylink.com">link three</a>
	</div>
</body>
</html>

Here's my CSS

a:first-child{ 
Font-color:#CDBE70
}
a:nth-child(3){
font-color:#FFc125
}

I want to set the first link to the font color #CDBE70 and set the third link to the font color #FFC125

Deliverance XXV · 06-02-2013 12:38pm

silvine wrote: »

Can someone help me with this?

Here's my HTML


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
        <div>
		<p><a href="http://www.mylink.com">link one</a>
		<p><a href="http://www.mylink.com">link two</a>
                <p><a href="http://www.mylink.com">link three</a>
	</div>
</body>
</html>

Here's my CSS

a:first-child{ 
Font-color:#CDBE70
}
a:nth-child(3){
font-color:#FFc125
}

I want to set the first link to the font color #CDBE70 and set the third link to the font color #FFC125

Try using CSS classes instead.


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
        <div>
		<p><a [COLOR="Red"][B]class="one"[/B][/COLOR] href="http://www.mylink.com">link one</a>
		<p><a [COLOR="Red"][B]class="two"[/B][/COLOR] href="http://www.mylink.com">link two</a>
                <p><a href="http://www.mylink.com">link three</a>
	</div>
</body>
</html>

a[COLOR="Red"][B].one[/B][/COLOR]{ 
Font-color:#CDBE70
}
a[COLOR="Red"][B].two[/B][/COLOR]{
font-color:#FFc125
}

robbiezero · 06-02-2013 1:03pm

p:first-child a {
color: #CDBE70
}

p:nth-child(3) a {
color: #FFc125
}

Deliverance XXV · 06-02-2013 1:15pm

Deliverance XXV wrote: »

Try using CSS classes instead.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
        <div>
		<p><a [COLOR="Red"][B]class="one"[/B][/COLOR] href="http://www.mylink.com">link one</a>
		<p><a [COLOR="Red"][B]class="two"[/B][/COLOR] href="http://www.mylink.com">link two</a>
                <p><a href="http://www.mylink.com">link three</a>
	</div>
</body>
</html>

a[COLOR="Red"][B].one[/B][/COLOR]{ 
Font-color:#CDBE70
}
a[COLOR="Red"][B].two[/B][/COLOR]{
font-color:#FFc125
}

Whoops! Read the question wrong. Think older IE has some issues with pseudo classes. When outputting from a db with unknown amounts and I want different styling I normally use PHP counters and different CSS classes.

oeb · 06-02-2013 1:45pm

silvine wrote: »

Can someone help me with this?

Here's my HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <div>
        <p><a href="http://www.mylink.com">link one</a>
        <p><a href="http://www.mylink.com">link two</a>
                <p><a href="http://www.mylink.com">link three</a>
    </div>
</body>
</html>

Here's my CSS

a:first-child{ 
Font-color:#CDBE70
}
a:nth-child(3){
font-color:#FFc125
}

I want to set the first link to the font color #CDBE70 and set the third link to the font color #FFC125

Hi there, there is a couple of things with the above.

Firstly, in your html, you are better off closing the paragraphs with a </p> tag

Next, the css property you are looking for is "color" not "font-color"

Finally, you are not using selectors right. If we break down the html you have there.

You have a div that contains 3 child elements (all of which are p elements) each of which contains 1 child. The a element.
[HTML]
<div>
<p> 
<a> 
</p>
<p> 
<a> 
</p>
<p> 
<a> 
</p>
</div>
[/HTML]

So as robbiezero indicated, the psudo class needs to be placed on the p element, and not on the a.

robbiezero wrote: »

p:first-child a {
color: #CDBE70
}

p:nth-child(3) a {
color: #FFc125
}

silvine · 06-02-2013 3:47pm

Thanks. It got it working but Codeacademy won't pass me. It says "Did you remember to set your first <a> to the color #CDBE70?"

The colours of the links change okay. Might be a bug.

oeb · 06-02-2013 4:03pm

silvine wrote: »

Thanks. It got it working but Codeacademy won't pass me. It says "Did you remember to set your first <a> to the color #CDBE70?"

The colours of the links change okay. Might be a bug.

Have you tried using first-child on the first selector?

silvine · 06-02-2013 4:05pm

Like this?

p:first-child a{
    color: #CDBE70;
}

Still won't pass me.

oeb · 06-02-2013 4:14pm

silvine wrote: »

Still won't pass me.

What's the actual question?

silvine · 06-02-2013 4:22pm

The error is:

Oops, try again.
Did you remember to set your first <a> to the color #CDBE70?

The question is

Feel like you're really starting to understand this CSS stuff? Prove it!

Add three links to the body of the HTML document. They can go anywhere and the text between the tags can say whatever you like.
On the CSS tab, set the all a:hovers to have no text-decoration.
Set the first link to the font color #CDBE70. (Remember: in this case, the first link also happens to be the first child of the body element.)
Set the third link to the font color #FFC125.

The link is http://www.codecademy.com/courses/web-beginner-en-WF0CF/3?curriculum_id=50579fb998b470000202dc8b#!/exercises/4

robbiezero · 06-02-2013 4:27pm

silvine wrote: »

The error is:

The question is

The link is http://www.codecademy.com/courses/web-beginner-en-WF0CF/3?curriculum_id=50579fb998b470000202dc8b#!/exercises/4

Remove the paragraph tags and just add the links directly to the body.
Your css is now:

a:first-child {
color: #CDBE70
}

a:nth-child(3) {
color: #FFc125
}

Your html

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	    <a class="one" href="http://www.mylink.com">link one</a>
	<a class="two" href="http://www.mylink.com">link two</a>
               <a href="http://www.mylink.com">link three</a>
		
	</body>
</html>

excuse the formatting.

Graham · 06-02-2013 4:37pm

As a quick FYI, in the top right of each CodeCademy tutorial there is a link to 'Q & A section' where others go into problems they had had with that particular step.

I'd say at least 50% of the problems are because the code you've entered isn't exactly as Codecademy expects (even though it might be correct). The Q & A will often point you in the direction of the expected format.

silvine · 06-02-2013 5:03pm

Seemed to work but I'm still not sure what I did wrong. I'll press on with the other lessons. Thanks!

robbiezero · 06-02-2013 5:05pm

silvine wrote: »

Seemed to work but I'm still not sure what I did wrong. I'll press on with the other lessons. Thanks!

You added the links to paragraph elements instead of directly to the body.

silvine · 06-02-2013 7:33pm

The Python lessons make CSS look easy!

CSS Pseudo classes

Comments