Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,469 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,469 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/