Help understaning this CSS

TommyKnocker · 16-10-2015 11:31am #1

While I dabbled with CSS a number of years ago, I would be a noo-b really.

I am doing some refreshers on "Codecademy" and I am not sure I understand what is happening with this code.

HTML Code

<html>

<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>

<ul class="links">
<li><a href="http://www.ret.ie/news">RTE News</a></li>
<li><a href="http://www.skynews.com">Sky News</a></li>
<li><a href="http://www.bbc.co.uk/news">BBC News</a></li>
</ul>

</body>
</html>

CSS Code

ul {
    list-style:none;
}
a:hover {
    text-decoration:none;
    color:red;
    font-weight:bold;
}

ul li:first-child a {
    color:#cdbe70;
}
ul li:first-child a:hover {
    color:red;
}

 ul li:nth-child(3) a {
    color:#FFC125;
 }
 ul li:nth-child(3) a:hover {
     color:red;
 }

The subject is "Selectors" and using "first-child" & "nth-child".

What I get is an UL with 3 links, and I used the "list-style:none" to remove the dots.

I set "a:hover to remove the underline, color the text red and make it bold when the user hovered over an link and all that worked as expected.

Then I added the "ul li:first child a" and "ul li:nth-child(3) a" sections to the CSS and while the color of the anchor text changed as expected, the color stopped changing to red on hover and remained at the color it was changed to. However the removal of the underline and bolding of the text from the "a:hover" section still worked as before.

I had to then write the "ul li:first-child a:hover" section to and add the "color:red;" there to get the text to change to red on hover.

I do not understand why the "color:red;" part of the "a:hover" section stopped working while the removal of the underline and the bolding of the text still worked fine after adding the "first-child" & "nth-child" sections.

If anybody can explain what is going on it would be much appreciated.

TIA

smash · 16-10-2015 11:43am

Did you click the links? They might be stuck to the browser default a:visited state

try:

a:link, a:visited {}
a:hover, a:active {}

TommyKnocker · 16-10-2015 12:14pm

smash wrote: »

Did you click the links? They might be stuck to the browser default a:visited state

try:

a:link, a:visited {}
a:hover, a:active {}

No, I had not clicked on any links and all the links had the default blue color with the underline.

The instructions with this exercise were

Instructions

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 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 color #FFC125.

And you were given a empty HTML with the basic tags and an empty CSS file to start with.

In section 2 I added the extra lines to bold and color the text and I had 3 standard blue underlined links which changed to bold red text and the underline vanished when I hovered over it.

I expected the "a:hover" to still work after the first and nth -child sections were added, as I understood the the a:hover would affect all anchor tags in the page, no matter where they were located.

As I said, I am lost as to why 2 of the 3 lines I added (change to bold & underline removed) to the a:hover sections still worked, only the color change was affected.

I have only tried in within the codecademy page so far. At home later I will try it in a browser in my laptop and see if the behavior is the same. Maybe it is just a quirk of the codecademy system. But I just thought I would as the knowledgeable folks here in case it is something to do with the cascading that I don't understand.

smash · 16-10-2015 12:17pm

I think your problem is here: "Remember: in this case, the first link also happens to be the first child of the body element."

You used a list and as such, the first link isn't the first child of the body. Disregarding why is it or isn't working with your selectors, I'd say this is why you're failing the module.

You can just have 3 links and use a:first-of-type and a:last-of-type selectors.

TommyKnocker · 16-10-2015 1:22pm

smash wrote: »

I think your problem is here: "Remember: in this case, the first link also happens to be the first child of the body element."

You used a list and as such, the first link isn't the first child of the body. Disregarding why is it or isn't working with your selectors, I'd say this is why you're failing the module.

You can just have 3 links and use a:first-of-type and a:last-of-type selectors.

Even if I do the links outside of a UL I still see the same outcome

HTML Code

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>


<a href="http://www.ret.ie/news">RTE News</a>
<a href="http://www.skynews.com">Sky News</a>
<a href="http://www.bbc.co.uk/news">BBC News</a>

</body>
</html>

CSS Code

a:hover {
    text-decoration:none;
    color:red;
    font-weight:bold;
}
a:first-child {
    color:#cdbe70;
}
/*
a:first-child:hover {
    color:red;
}
*/
 a:nth-child(3) {
    color:#FFC125;
 }
/*
 a:nth-child(3):hover {
     color:red;
 }
*/

With this I get my links on a single line and I need to uncomment the "a:first-child:hover" and "a:nth-child(3):hover" to get the functionality I expected.

With these commented out, I have a gold underlined link, a blue underlined link and a yellow underlined link and when I hover over them the text turns bold and the underline vanishes, but the text color dose not change to red as is configured in the "a:hover" section.

smash · 16-10-2015 1:41pm

You're not closing your links.

TommyKnocker · 16-10-2015 2:18pm

smash wrote: »

You're not closing your links.

I actually am, it is just the way the code box in BB is displaying it.

When I click edit I can see they are closed.

This is the HTML that should be displayed

<a href="http://www.ret.ie/news">RTE News</a>
<a href="http://www.skynews.com">Sky News</a>
<a href="http://www.bbc.co.uk/news">BBC News</a>

I have changed from code block to quote blocks in the posts above. I lose the formatting, but at least the correct syntax is shown.

TommyKnocker · 16-10-2015 2:26pm

Just for completeness here is the "Hint" that was give for this exercise

Hint

To add a link, you can use an a element like this:

<a href="http://example.com>My link</a>

To target the first link, you can use the a:first-child selector.

To target the third link, you can use the a:nth-child(3) selector.

groupthink · 23-10-2015 2:39pm

Hey TommyKnocker,

The reason you are seeing this issue is because you have used a CSS selector which is much stronger to overwrite the default color of the "a" tag. This has the knock on effect of overpowering your original hover color change too.

To avoid this you would need to target the "a" tag using a single css selector. To illustrate this simply add a class name to the "a" tag. The use this class name to target the "a" tag and set its new default color, instead of use the whole :first-child thing.

Now when you hover the link you will see that it's hover styles (red and bold) will still show. The reason is that the css selector ".className" & "a" are generally of the same strength.

HTML:
<a href="#" class="first">RTE News</a>

CSS:
.first{ color:green;}

Does this make sense?

Help understaning this CSS

Comments