Day 15: Css: Selector 1,2,3,4.

Selector 1 

button{

background-color: aqua;

}

#primary{

background-color: brown;

}

p{

background-color: purple;

}

a[href="someone link"]{

background-color: red;

}

p,a{

background-color: orange;

}

-----------------------------------------------------------------------------------------------------------------------------

Selector 2

img+p{

}

div#id{

}

div.class1{

}

-----------------------------------------------------------------------------------------------------------------------------

Selector 3

ul li{

}

ul > li{

}

p ~ span{

}

-----------------------------------------------------------------------------------------------------------------------------

Child combinator / Direct child selector (>) in CSS

-It only matches elements that the second selector matches and are directly children of elements that the first selector matches. 

-In the following example : 

In the following example, only the paragraphs which are direct children of div with class name “parentDiv” are affected by applying the direct child selector (>), and only their font color will be changed to blue. 

     

      • Code :

       

      <!DOCTYPE html>

      <html>

      <head>

          <style>

              .parentDiv{

                  background-color: aqua;

                  width: 500px;

                  height: 300px;

                  border: solid 5px black;

                  margin: 100px;

                  text-align: center;

              }

              .parentDiv > p{

                  color: blue;

              }

          </style>

      </head>

      <body>

       

      <div class="parentDiv">

          <p>This paragraph 1 is direct child of div</p>

          <p>This paragraph 2 is direct child of div</p>

          <div>

              <p>This paragraph 3 is not a direct child of div as it is nested inside another div, hence it will not change into blue font color</p>

          </div>

      </div>

      </body>

      </html>

         

          • Output :

            What is the difference between direct child selector (.parent > .child) and Descendant combinator

                (.parent .child)? 

                   

                     

                      • Child combinator / Direct child selector (>) only matches elements that the second selector matches and are direct children of elements that the first selector matches, it does not select indirect children of the parent element.
                      • In Descendant combinator, all the elements that the second selector matches are selected, whether they are direct children or not.
                    • Example :

                    In the below given example, by using the Descendant combinator, all the paragraph tags are selected whether they are direct child or not. (unlike the direct child selector, where only direct child elements are selected)

                    Code :

                    <!DOCTYPE html>

                    <html>

                    <head>

                        <style>

                            .parentDiv{

                                background-color: aqua;

                                width: 500px;

                                height: 300px;

                                border: solid 5px black;

                                margin: 100px;

                                text-align: center;

                            }

                            .parentDiv p{

                                color: red;

                            }

                        </style>

                    </head>

                    <body>

                     

                    <div class="parentDiv">

                        <p>This paragraph 1 is direct child of div</p>

                        <p>This paragraph 2 is direct child of div</p>

                        <div>

                            <p>This paragraph 3 is not a direct child of div</p>

                        </div>

                    </div>

                    </body>

                    </html>

                    • Output :

                    Comments

                    Post a Comment

                    Popular posts from this blog

                    else-if condition in if-else statements: Concatenation in JavaScript :

                    Image
                      else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
                    Read more

                    LCM & HCF- Tricks

                      Trick-1 As learned in the previous video, the greatest number that will exactly divide x, y, & z is the HCF of x, y, & z. If asked to find out the greatest number that will divide x, y, & z leaving reminders a, b, & c, respectively, the number would be HCF of (x-a), (y-b), and (z-c). Example-  Find the greatest number that will divide the 204 and 327 leaving remainders 4 and 7, respectively. Solution:  Greatest number will be HCF of (204-4) and (327-7) HCF of 200 and 320 = 40 Therefore, 40 will divide 204 and 327 leaving remainders 4 and 7, respectively.   Trick-2 As learned in the previous video, the least number which when divided by x, y, and z leave no remainder is LCM of x, y, and z. The least number which when divided by x, y, and z leave remainders a, b and c, respectively is given by [(LCM of x, y, & z) - k]. Where, k = x-a = y-b = z-c Example-  Find the least number divided by 12, 15, and 20 leaves remainders 4, 7, and 12, respecti...
                    Read more

                    most used coding symbols

                     Here’s a list of most used coding symbols (characters) along with their common names and uses in programming: Symbol Name Common Use in Programming = Equals / Assignment Operator Assigns value to variable == Equality Operator Compares two values != Not Equal Checks inequality > Greater Than Comparison < Less Than Comparison >= Greater Than or Equal Comparison <= Less Than or Equal Comparison + Plus Addition or string concatenation - Minus Subtraction * Asterisk / Star Multiplication / Slash / Forward Slash Division % Modulus Remainder after division ++ Increment Increases value by 1 -- Decrement Decreases value by 1 && Logical AND Used in conditions ` ` ! Logical NOT Negation & Bitwise AND Bitwise operations ` ` Bitwise OR ^ Caret / XOR Bitwise XOR ~ Tilde Bitwise NOT -> Arrow Accessing struct/class members (C/C++) . Dot Access obj...
                    Read more