Change font color base on child class

Question

I want to change the font color if it have specific class.

HTML:

    <p class="status">  
      test
      <span class="has-this">test</span> (all turn to red)
    </p>

    <p class="status"> 
      <span>test</span> 
    </p>

SCSS:

.status {
        font-size: 25px;
        color: blue;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        .has-this & {
            color: red;
        }
    }

If it has 'has-this' class inside I want to change font color to red. Is it possible to achieve this by using css only ?(no js) The status dynamically generate some with has-this some not .

Here my codepen http://codepen.io/anon/pen/ZbGyZm

With the code you have provided, I don't think this is possible without JavaScript. Can you not add the class `has-this` to `status` instead? — Hidden Hobbes, Sep 08 '15 at 07:26
no, the status dynamically generate some with has-this some not . — Sahal Saad, Sep 08 '15 at 07:31

score 0 · Answer 1 · answered Sep 08 '15 at 07:14

0

Add below Css:

.status span {
  color: gray;
}

answered Sep 08 '15 at 07:14

Ivin Raj

3,237
2
17
46

I think you need to re-read the OP. All this will do is make the text in `span`s which are children to `.status` `grey`. – Hidden Hobbes Sep 08 '15 at 07:47

Imran Bughio · Answer 2 · 2015-09-08T07:20:33.203

0

You don't need to use the & character just do this:

.status {
    ....
    .has-this {
      ....
    }
}

The & character represents the parent selector and renders it as it is when scss is compiled, for example:

.status {
   ...
    &:after{
   ...
   }
}

becomes:

.status{ ... }
.status:after{ ... }

edited Sep 08 '15 at 07:20

answered Sep 08 '15 at 07:15

Imran Bughio

4,215
2
24
50

Thank you but it didn't work . I wan to change entire status to red not only that one word . I can simply remove & for change that one word . – Sahal Saad Sep 08 '15 at 07:17
Oh sorry just noted that has-this is a child class which means you dont need the & character at all – Imran Bughio Sep 08 '15 at 07:18
I wan to change entire status to red not only that one word . I can simply remove & for change that one word . – Sahal Saad Sep 08 '15 at 07:20
also your spelling is incorrect in html ... you have written `clss` instead of `class` – Imran Bughio Sep 08 '15 at 07:21
I already fix it in codepen . – Sahal Saad Sep 08 '15 at 07:21
If you want to change the whole word dont define .has-this.... simple apply color to the first selector ? [Demo](http://codepen.io/anon/pen/qOdXEd) – Imran Bughio Sep 08 '15 at 07:23
that status dynamically render. I want to check if arrow upward(has-this) I wan the whole status turn to red else leave it blue. – Sahal Saad Sep 08 '15 at 07:28
then add the .has-this class on the parent p tag not the child span tag – Imran Bughio Sep 08 '15 at 07:35

score 0 · Answer 3 · answered Sep 08 '15 at 07:24

0

i have done the code you can see... HTML part

  <span class="a">test</span> 
  <h1 class="h1">jkcldjf</h1>



  <span class="a">test</span> k

</div>

SCSS part...

.status {
        font-size: 25px;
        color: blue;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        & .a {
            color: green;
        }
       & .h1
         {
           color:green;
         }
    }

answered Sep 08 '15 at 07:24

Pardeep Jain

71,130
29
141
199

not even close to my question – Sahal Saad Sep 08 '15 at 07:29

score 0 · Answer 4 · answered Sep 08 '15 at 07:30

0

Edit Your CSS like

.status {
    font-size: 25px;
    color: blue;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    .has-this {
        color: red;
    }
}

answered Sep 08 '15 at 07:30

Lalji Tadhani

12,597
2
19
36

OP wants all text within `.status` to be `red` not just text inside `.has-this`. – Hidden Hobbes Sep 08 '15 at 07:31
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Lalji Tadhani Sep 08 '15 at 09:06

Change font color base on child class

4 Answers4