CSS's Three Main Features

📢 This article was translated by gemini-2.5-flash

CSS’s Three Main Features: Inheritance, Cascading, Specificity

Inheritance

Child elements inherently pick up text-related properties from their parents. If a child has its own styles, it won’t inherit those specific properties.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    body {
        font: 30px/0.5 楷体;
        color: aqua;
    }
</style>

<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
        
    <a href="#">Color not inherited</a>
</body>

Cascading

When selector types are the same:

Same properties overwrite: Later CSS properties override earlier ones.
Different properties stack: All distinct CSS properties apply.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    div {
        color: red;
        font-size: 30px;
    }
    div {
        color: aqua;
        font-weight: 700;
    }
</style>

<div>
    Color is aqua, font size 30px, bold.
</div>

Specificity

When an element uses multiple selectors, the style with higher specificity wins. Here’s the specificity order:

Universal selector < Type selector < Class selector < ID selector < Inline styles < !important

Generally, avoid !important. The next example skips it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
    #app {
        color: orange;
    }
    .box {
        color: blue;
    }
    div {
        color: red;
    }
    * {
        color: purple;
    }
</style>

<div>Type selector red</div>
<div class="box">Class selector blue</div>
<div class="box" id="app">ID selector orange</div>
<div class="box" id="app" style="color: aqua;">Inline style aqua</div>

Using !important

1
2
3
4
5
6
7
<style>
    div {
        color: aqua !important;
    }
</style>

<div style="color: blue">aqua</div>

Specificity of Compound Selectors

Compare from left to right based on the count: (inline styles, number of ID selectors, number of class selectors, number of type selectors). More counts in a category means higher specificity. If counts are equal, move to the next category.

If !important is present, it’s the highest priority. Inherited styles have the lowest priority.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* (0, 0, 2, 1) */
    .c1 .c2 div {
        color: blue;
    }
    /* (0, 1, 0, 1) */
    div #box3 {
        color: red;
    }
    /* (0, 1, 1, 0) */
    #box1 .c3 {
        color: aqua;
    }
</style>

<div class="c1" id="box1">
    <div class="c2" id="box2">
        <div class="c3" id="box3">
            aqua
        </div>
    </div>
</div>

Example 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    /* (0, 2, 0, 0) */
    #father #son {
        color: aqua;
    }
    /* (0, 1, 1, 1) */
    #father p.c2 {
        color: black;
    }
    /* (0, 0, 2, 2) */
    div.c1 p.c2 {
        color: red;
    }
    /* Inherited */
    #father {
        color: blue !important;
    }
    /* Inherited */
    div#father.c1{
        color: yellow;
    }
</style>

<div class="c1" id="father">
    <div class="c2" id="son">
        aqua
    </div>
</div>

Emmet Shorthand

This is a shorthand for writing code. Type an abbreviation, and VS Code auto-generates the full code.

For HTML

Description	Emmet	Result
Class selector	`tagname.classname`	`<div class="box"></div>`
ID selector	`tagname#id`	`<div id="app"></div>`
Sibling tags	`div+p`	`<div></div><p></p>`
Parent-child tags	`div>p`	`<div><p></p></div>`
Multiple identical tags	`span*3`	`<span></span><span></span><span></span>`
Tag with content	`div{content}`	`<div>Content</div>`

For CSS, it’s often initial letters of words.

h500+w300+bgc becomes

1
2
3
4
5
div {
    width: 500px;
    height: 300px;
    background-color: #fff;
}