The CodeWolf

Part 4 – Diving deeper into CSS

1. Pseudo Classes and Pseudo elements
2. CSS classes vs ID selectors
3. :not()
4. Summary till part 4 of diving deep into CSS

So last time we covered some advanced concepts in CSS, this time we are here to cover some more concepts and their application.

Pseudo classes and Pseudo elements

Pseudo classes: A CSS pseudo-class can be thought of as a keyword that is added to a selector that specifies a special state of the selected element. 

For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.

Pseudo elements: A CSS pseudo-element is similarly a keyword added to a selector that lets you style a specific part of the selected element(s).

For example, ::first-line can be used to change the font of the first line of a paragraph.

Using the above two we can add a lot of dynamic styling to the elements that would help us to create better design and a higher animated content.

Properties worth remembering (A pictorial representation)

CSS classes vs ID selectors

CSS classes are generally used for their re-usability and for mass css styling.

Id selectors are on the other hand used for their great preciseness in selecting one element on a page and giving the elements some non css meaning like adding links or hovers etc.

!important

!important overwrites specificity and all other selectors.

Generally !important should not be applied because of the fact that we need specificity to make sure that our CSS rules and selectors work in a predictable fashion.

Since !important makes sure that the style is always applied regardless of what other rules/selectors are applied.

E.g.

.demo{ color: red !important; }

:not()

It is a pseudo class that basically works opposite to the selectors. It represents elements that do not match given selectors.

It is often called the negation pseudo class as it negates selection.

This is more like an experimental feature that is not supported by most browsers.

This can be explained by following example:
E.g.

a:not(.active){ color: red; }

The above selector represents that select all anchor tags that do not have the active pseudo class attached to it.

Summary

The part 3 and part 4 can be summarised as below:

So that’s it till then! Make sure you subscribe for more!