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!

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 CSS Basics (2014) Basic Selectors Pseudo-Classes

Erik L
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Erik L
Full Stack JavaScript Techdegree Graduate 19,470 Points

pseudo classes

What is the difference between a pseudo class and element? Also what does "a" mean in: a:active { color: lime; }

An HTML element is everything from the opening tag to the closing tag. This whole thing is an HTML element:

<div>potatos</div>

You can select this element and turn the background red in CSS like this:

div {
  background-color: red;
}

A pseudo class is added to the end of a selector to be more specific and only select that element if it's in a particular state. The colon denotes a pseudo class after the element. For example:

div:hover {
  background-color: red;
}

This style would only apply when you hover your mouse over the div. Here's 1 more example:

div:first-of-type {
  background-color: red;
}

If you had 2 divs on a page, this would only make the background of the first one red because the pseudo class adds additional restraints to the selector filtering it to only select the first one.

Erik L
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Erik L
Full Stack JavaScript Techdegree Graduate 19,470 Points

I see, thanks for taking your time to explain in a detailed manner, by the way how do you copy and paste code like you did to answer to my question?

1 Answer

No problem, happy to help if I can. Treehouse uses a language called markdown to style text in posts. When you type a message on Treehouse you should see a link under the textarea to a Markdown Cheatsheet. He is another markdown cheatsheet https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code and here is a markdown previewer if you want to experiment with it. https://dillinger.io/