Lesson 3

CSS – Descendant Selector

To help us better select HTML tags we can use a new way to pick elements: descendant selectors.

See the Pen ggzBJg by HackingHeroes.org (@hackingheroes) on CodePen.

As we can see in this example, our styles only affect the <a> inside the <p>. The way to create the rule is to have the tags with a space in between:

In this case all anchors inside any paragraph will be affected.

 

CSS – Class Selector

Now that we have learned how to use tag selectors, example: h1{} and p{}. We are ready for next step: class.

Although these selectors are very useful, sometimes it might be a problem if we only want to change specific tag. In the next scenario we have 5 green paragraphs:

See the Pen MJGwxz by HackingHeroes.org (@hackingheroes) on CodePen.

And now our boss asks us to change the color of the second and fourth paragraphs, how can we do it? Classes to the rescue!

See the Pen BpxNem by HackingHeroes.org (@hackingheroes) on CodePen.

Cool! So, how does it work? We add an attribute of type class to the desired tag:

And then, on CSS we “call” the class by using “.class” (the . is required). In this case .nice-paragraph

One more sample:

See the Pen apGvbb by HackingHeroes.org (@hackingheroes) on CodePen.

 

CSS – Pseudo classes

Have you ever noticed that when you put the mouse cursor over some areas in websites (specially buttons) sometimes it changes some colors? For that we have pseudo classes:

See the Pen ygjQyR by HackingHeroes.org (@hackingheroes) on CodePen.


For now let’s play around with :hover that allow us to change the properties when the cursor is over the element:

The syntax is simple:

Later we will learn more pseudo-classes. If you are very curious, take a sneak peek!

 

« Lesson 2 Index Lesson 4 »