Learn CSS: Selectors and Visual Rules


#1

The title of the topic is a lesson in CSS.

The #6 exercise in this lesson reads thus:

At the bottom of the page, there’s a link to the full recipe. Let’s make the link a different color.

Notice that in index.html , on line 42, there is a p element with a class of citation , then an a element inside of it with a class of external-link . Navigate to style.css and write a selector using external-link class.

Then, add this code inside of the selector’s curly braces:
color: SeaGreen;

The answer is this according to the video:
.external-link {
color: seagreen;
}

What I had done, and it worked just as well, was this:
p.citation .external-link
.external-link {
color: seagreen;
}

Other than the obvious - that being less coding - what is the difference?

Mahalo!


#2

Too much specificity. This can come back and bite us. The implication is that external links in citation class paragraphs will be different from external links elsewhere. The above design implies all external links will be the same.

.external-link {
    color: seagreen;
}

Not all browsers support named colors the same way. If you look at the named colors list, you will see what most recognize.

http://www.crockford.com/wrrrld/color.html


#3

Thank you for your input. Much appreciated! I was wondering if it was too much specificity.

You wrote:
“Too much specificity. This can come back and bite us. The implication is that external links in citation class paragraphs will be different from external links elsewhere. The above design implies all external links will be the same.”

Does your reply relate specifically to the p.citation .external-link code or to both?


#4

Just that one, which selects external links that are children of a citation paragraph. It would not include all external links, as one would assume is the intention of this designer.


#5

See, that was my problem. I didn’t realize the intention! I get it now. Thanks! =^)