Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

How can I apply the same colors for my pseudo classes with repeating the CSS? (codepen included).

I have a nav tag that has the same colors I want to apply to my aside .floatRight class. In the .floatRight box I have some links that go to other sites. I would like those links in the box to have the same colors as my nav pseudo classes. I'm at a complete loss as how I can make those links the same color as the pseudo classes without repeating the CSS. Does anyone know how I can do this? Thanks in advance for any feedback.

Codepen link: http://codepen.io/mike316/pen/ZYvyJe

2 Answers

Alex Friant
Alex Friant
6,444 Points

My advice would be to add a class like "customLinks" to the nav & aside elements:

<nav class="customLinks">

<aside class="floatRight customLinks">

That way, your CSS can look nice and neat:

.customLinks a:link {
  color: #000;
}

.customLinks a:visited {
  color: purple;
}

.customLinks a:hover {
  color: #fff;
}

.customLinks a:active {
  color: #00FFFF;
}
mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

That's exactly what I'm looking for Alex, EXCELLENT JOB!!! Thank you so much for your help. You got the best answer. Thank you again for taking the time to help me, it means a lot.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You can make multiple selections before a single style block, would that solve your problem?

.floatRight a:link,
nav a:link {
  color: #000;
}

.floatRight a:visited,
nav a:visited {
  color: purple;
}

.floatRight a:hover,
nav a:hover {
  color: #fff;
}

.floatRight a:active,
nav a:active {
  color: #00FFFF;
}
mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I believe that is the only way to do it with pseudo classes. The only thing that has me thinking is there any other way to it without repeating the a:hover in both the type selectors? Thank you for taking the time to reply and help me out.