Anatomy of CSS rules

CSS rules are mainly composed of two parts:

• the selector
• the ruleset

It is of the form of

<some selector> {
    attribute1: value1;
    attribute2: value2;
}

We see that the ruleset is a set of rules, which are of the form of <key>: <value>;

The selector

The selector determines what condition an element needs to meet in order to be affected by the ruleset attached to the selector.

Example:

div {
    border: 1px solid black;
}

#identifier {
    background-color: green;
}

.someclass {
    background-color: lightgreen;
}

<div>a</div>
<div id="identifier">b</div>
<div class="someclass">c</div>
<div class="someclass">d</div>
<span class="someclass">e</span>

Here, we have a rule for all div elements, specifying a border to any divs. We also have a rule specifically for the item whose id is identifier and another for items which have the someclass class.

These are the planword explanations of the selector.

Rule overrides

When you have multiple selectors met by the same element, if they have conflicting rules, then the priority score of the given selectors, which largely depends on their specificity determines which rule is to be applied.

div {
    border: 1px solid black;
    background-color: yellow;
}

#identifier {
    background-color: green;
    color: red;
}

.someclass {
    background-color: lightgreen;
    color: blue;
}

<div>a</div>
<div id="identifier">b</div>
<div class="someclass">c</div>
<div class="someclass">d</div>
<span class="someclass">e</span>

Read more about specificity and priority of CSS selectors here: https://blogs.halodoc.io/best-practices-that-we-follow-to-avoid-specificity-issues/

In case of draws, that is, two different rules are of the same specificity, then the one which was defined later will override the one defined earlier:

div {
    background-color: red;
}

div {
    background-color: green;
}

<div>a</div>

You will also need to know about the !important keyword, which overrides the priority of rules:

div {
    background-color: red !important;
}

div#first {
    background-color: green;
}

<div id="first">a</div>

We see that the less specific rule is being applied because of the !important keyword

Rule inheritance

Some rules are inherited by descendants, but can be overriden lower down in the hierarchy:

div {
    background-color: green;
}

div .exception {
    background-color: red;
}

<div>
    <p>a</p>
    <p class="exception">b</p>
    <p>c</p>
</div>

We can see that the rule applied to div is inherited by its descendants, except for .exception, which overrides it.

Rules are reevaluated

If an element no longer meets a selector, then it loses the style. And, if an element becomes a match for a rule, then the rule is applied to it:

setInterval(function() {
    for (let div of document.querySelectorAll("div")) {
        div.classList[div.classList.contains("active") ? "remove" : "add"]("active");
    }
}, 1000);

div.active {
    font-weight: bold;
}

<div class="active">a</div>
<div>b</div>