This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by kckuei
over 9 years

Combining Pseudo-Class Selectors with

If I enclose my <a> links in <div> or <p> tags, the color attributes that I assign to my pseudo-class selectors do not display in the preview window.

For example, my html code for the links are as follows:

<body>
    <p><a href="http://www.reddit.com/">Link1</a><p>
    <p><a href="http://www.reddit.com/">Link2</a><p>
    <p><a href="http://www.reddit.com/">Link3</a><p>
</body>

My psuedo-class selectors are defined as:

a:nth-child(1) {
    color:#CDBE70;
}

a:nth-child(3) {
    color:#ffc125;
}

a:hover {
    text-decoration:none;
    color:black;
    }

I tried the following modification to no effect as well:

p a:nth-child(1) {
    color:#CDBE70;
}

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

a:hover {
    text-decoration:none;
    color:black;
    }

Answer 53aff05d282ae39dd5001ead

1 vote

Permalink

p:first-child a {
    color:#CDBE70;
}
p:nth-child(3) a {
    color:#ffc125;
}
points
Submitted by Roy
over 9 years

1 comments

kckuei over 9 years

That seems to have fixed it! Seems to make sense as well;

are the direct children, followed by in terms of how the code is written. Thank you!