More on Selectors & CSS Features

More on CSS Classes

In the below example we have two classes applied to one HTMl elements. The order that we place these two classes does not matter. The CSS styles are applied as per the specifity of the selectors (if both classes have the same property with different values; in this case it matters which class is defined last in the CSS file).

<div class="class1 class2">
</div>

Apply this style to all anchor tags with an active CSS class.

a.active {   
}

Target all anchor tags with an id of: #my-id (there should only be one element with this id)

a#my-id {
}

CSS Class Selectors vs ID Selectors

Using ID’s to just apply a style is not recommended. Use a class even if you are only applying it to one element. You can use an ID selector if an element already has an ID.

You can jump to a specific section of a HTML page with id’s, for example:

<a href="#intro">Intro</a>

(Not) using !important

Avoid !important it leads to bad code.

Selecting the Opposite with :not()

If you want to select any element that is not active:

Any anchor tags that do not have the active class

a:not(.active) {
}

Note: The below syntax (space between the ‘a’ and ‘:') would select any elements that are nested in the anchor tag and that do not have the active class:

a :not(.active) {
}

You can usually find a positive way of writing code and avoid the :not() selector. Try to avoid the :not() selector.

CSS and Browser Support

You always have to check if the browser supports a certain feature.

https://caniuse.com shows you if you can use CSS properties, JavaScript features etc

Summary

.active,
a:hover {
    color: white;
}

The above code will set a white text color ONLY to element like this:

<a href="..." class="active">Click me!</a>

but also to:

<a href="...">Click me!</a>

Comments