0

i am trying to bind style in my css style using below format but its not working and i am learner for web development can some one help me please what is mistack?

css

.block-header.row.sample h1{
        color: aqua;
    }

html

 <div class="block-header">
        <div class="row sample">
          <div class="col-sm-6">
            <h1 class="page-title">Pending Approvals</h1>
          </div>
       </div>
 </div>
Krish
  • 4,166
  • 11
  • 58
  • 110
  • Two selectors without a space between them (`.a.b`) applies to elements that satisfy *both*. A space between selectors (`.a .b`) means *"descendant of"*. – Tyler Roper Jan 23 '19 at 01:54

2 Answers2

0

Your style rule is wrong, it should be: .block-header .row.sample h1 instead of .block-header.row.sample h1. When you have a style for an element that's a descendant of another one (in your case .row.sample is a child of .block-header) you should have the parent first, followed by a space (or > if it's a direct child) and then the descendant element, just like you're doing with the h1...

You can see it works with that simple change:

.block-header .row.sample h1{
        color: aqua;
}
 <div class="block-header">
        <div class="row sample">
          <div class="col-sm-6">
            <h1 class="page-title">Pending Approvals</h1>
          </div>
       </div>
 </div>

You can read more about selectors in mdn.

DarkAjax
  • 15,955
  • 11
  • 53
  • 65
0

The problem in your rule is that there are no spaces between your classes, which makes the selector any h1 element with the parent having classes block-header, row, and sample.

You would need to put spaces so that the selector knows these elements are nested inside each other:

.block-header .row.sample h1 {
    color: aqua;
}

Learn more about how these selectors work from this FreeCodeCamp guide.

Siavas
  • 4,992
  • 2
  • 23
  • 33