0

I know how to give same styling to multiple classes , we do use a comma between the class names . but what i can't understand what this below code is.

.navbar-inverse .navbar-toggle { background-color: #333; }
Naveed Ramzan
  • 3,565
  • 3
  • 25
  • 30
Raghuram
  • 21
  • 5
  • I think this is possible using scss. A workaround would be to create another class for all elements where you want this style(An element can have multiple classes) – dan1st Jul 23 '19 at 04:43
  • It will applied only for "navbar-inverse" box.. "navbar-toggle" it may have the parent class is "navbar-inverse" – Manikandan2811 Jul 23 '19 at 04:46

6 Answers6

2

Its hierarchy this will impact to .navbar-toggle class under navbar-inverse

Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
  • 1
    so we are not styling multiple classes here, we are targeting navbar-toggle which is under navbar-inverse to have color #333 – Raghuram Jul 23 '19 at 04:45
  • right. and if both class on same element then it will be like .navbar-toggle.navbar-inverse without space between. – Sumit Patel Jul 23 '19 at 04:47
  • why can't we use this .navbar-inverse>.navbar-toggle – Raghuram Jul 23 '19 at 04:49
  • yes you can use this > too but for that you have to understand css selector. you can find more info on this -- https://www.w3schools.com/cssref/css_selectors.asp for all css selector. – Sumit Patel Jul 23 '19 at 04:53
  • Hope this will answer all your question related to css selector & when can we use them. – Sumit Patel Jul 23 '19 at 04:54
1

This will give background color to the element with class name "navbar-toggle" which is inside an element with class name "navbar-inverse"

tanvi korgaonkar
  • 363
  • 1
  • 6
1

The space between parts of a CSS selector is called descendant combinator: 

ancestorSelector descendantSelector { rules }

A CSS selector utilizing this is called descendant selector. Please note that any amount of whitespace works just like a single space.

whereas > indicates a parent-child relationship and is called child combinator.

parentSelector > childSelector { rules }

A CSS selector utilizing this is called child selector.

Look at this example:

/* 
  this will affect any element whose classlist contains "b" 
  inside any element whose classlist contains "a",
  no matter how deeply nested it is 
*/
.a .b {
  color: blue;
}

/* 
  this will affect only elements whose classlist contains "b" 
  and which are direct children of any element whose classlist contains "a"
*/
.a > .b {
  color: red;
}
<div class="a">
  <div class="b">
    This is the direct child of <code>&ltdiv class="a"&gt</code>.
    <div class="b">
      This is <strong>not a direct child</strong> of <code>&ltdiv class="a"&gt</code>.
    </div>
  </div>
  <div class="c">
    <div class="b">
      <hr />
      Unaffected by <code>.a &gt .b</code>, but <code>.a .b</code> matches.
    </div>
  </div>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128
0

navbar-inverse is the parent and .navbar-toggle is the child.

When you want to make a hierarchy of parent and child classes, you follow this approach. In the below code, see how the first .navbar-toggle has background while the second one does not.

.navbar-inverse {
  background-color: #ccc;
  padding: 1em;
}

.navbar-inverse .navbar-toggle {
  background-color: #333;
  color: white;
}

.navbar {
  background-color: #ccc;
  padding: 1em;
}
<div class="navbar-inverse">
  <div class="navbar-toggle">
    This is the child
  </div>
</div>

<hr>

<div class="navbar">
  <div class="navbar-toggle">
    This wont be affected!
  </div>
</div>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
0

.navbar-inverse > .navbar-toggle { /This style applied only for first level child/

}

.navbar-inverse .navbar-toggle { /This style applied for all the child/

}

Mahesh Babu Kotha
  • 1
  • 1
-1

It shows that we have two classes

.navbar-inverse and .navbar-toggle

.navbar-toggle is child of .navbar-inverse

and the css applied will be workable for only and only where .navbar-toggle as child of .navbar-inverse will be written in html.

Naveed Ramzan
  • 3,565
  • 3
  • 25
  • 30