Descendant selectors (CSS selectors)

Descendant selectors concentrated form:

{1} parent * find all the progeny from the parent.

2. parent progeny {1} is found in progeny from a parent or a parent progeny {2} is found from the 2 parent progeny.

3. parent progeny progeny 2 {1} This is found from the parent progeny, and then found in the progeny progeny 2.

The first form: * Although the Select All but a lower priority.

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8"  /> 
        < title > </ title > 
        < style > 
            div { 
                padding : 20px ; 
                background : RGBA (255,0,0,0.2) ; // this is to give it a red, transparency 0.2 
            }  
        II.A * { 
                border : 2px Solid Black ; // this is all descendants of a selected class 
            }
         </ style > 
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

The second form:

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8"  /> 
        < title > </ title > 
        < style > 
            div { 
                
                padding : 20px ; 
                background : RGBA (255,0,0,0.2) ; 
            } 
            
        .a .b { 
                border : 2px Solid Black ; // Similarly here also possible to select .c .a because they are all descendants. 
            }
            
            
         </ Style > 
    <>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

The third form: it is not possible to select simultaneously .b and .c, only select .c.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

Another point to note the following code: div nested in a div class named c and then nested in a div class named c, then the same will be selected

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c
                <div>
                    <div class="c">span</div>
                </div>
                </div>
            </div>
        </div>
    </body>
</html>

Descendant selectors (CSS selectors)

The first form: * Although the Select All but a lower priority.

The second form:

The third form: it is not possible to select simultaneously .b and .c, only select .c.

Guess you like