CODEWITHSUNDEEP
csshyperlink
tim.baker
tim.baker

Reputation: 3307

Why is link styling applying to all elements, even though it should be for just one element

Why is it that the links on this page (and all others but best to demo) sharing the link style accross all pages. To demo this click on Portfolio then go back, you will see the link text turns white, even though this should only be for the "message" element (blue with rounder corners) at the bottom of the page?

This is my CSS

.message {
background-color:#54a0d9;
border:1px solid #54a0d9;
color:#fff;
}

.message h2 {
font-size:22px;
color:#fff;
}

.message a:link, a:visited, a:hover, a:active {
color:#fff; }

and HTML is a normal link inside an element (which is not a child of the message element.

Surely that should only apply to the Message elements?

I've done some research on whats causing this but so far nout...

Upvotes: 0

Views: 58

Answers (1)

Chris Hayes
Chris Hayes

Reputation: 12040

Separating selectors by commas means to consider them completely separately. So here:

.message a:link, a:visited

Means to apply this style to a:links inside of elements with a class of "message", and also to a:visiteds. Note that the latter does not have to be inside of an element of class message. Simply put .message in front of each comma-separated term to fix it.

Upvotes: 5

Related Questions