Press "Enter" to skip to content

Hierarchie Based Examples in CSS

Last updated on October 5, 2019

Definition :

  • It is a process of applying css based on the hierarchie of the components. Then it is called as hierarchie based css.

Program 1 :

<html>

   <style type=”text/css”>

   div+p

   {

   background-color : red;

   }

   </style>

   <body>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                  <div>

                    <p> Hello2 </p>

                                <p> Hello2</p>

                                <p> Hello2 </p>

                  </div>

                    <p> Hello3 </p>

                                <p> Hello3 </p>

                                <p> Hello3 </p>

                </body>

</html>

Div+p means color display after div tag to paragraph first one to display.

Program 2 :

<html>

   <style type=”text/css”>

   div~p

   {

   background-color : red;

   }

   </style>

   <body>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                  <div>

                    <p> Hello2 </p>

                                <p> Hello2</p>

                                <p> Hello2 </p>

                  </div>

                    <p> Hello3 </p>

                                <p> Hello3 </p>

                                <p> Hello3 </p>

                </body>

</html>

Div~p means color display the after div tag to full paragraph to display background color.

Program 3 :

<html>

   <style type=”text/css”>

   div>p

   {

   background-color : red;

   }

   </style>

   <body>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                  <div>

                    <p> Hello2 </p>

                                <p> Hello2</p>

                                <p> Hello2 </p>

                  </div>

                    <p> Hello3 </p>

                                <p> Hello3 </p>

                                <p> Hello3 </p>

                </body>

</html>

div>p means color display the div tag to full paragraph to display background color.

Program 4 :

<html>

   <style type=”text/css”>

   div p

   {

   background-color : red;

   }

   </style>

   <body>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                   <p> Hello1 </p>

                  <div>

                    <p> Hello2 </p>

                                <p> Hello2</p>

                                <p> Hello2 </p>

                  </div>

                    <p> Hello3 </p>

                                <p> Hello3 </p>

                                <p> Hello3 </p>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *