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