Only stylize if the element belongs to a class

Question

Only stylize if the element belongs to a class

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

Good afternoon, friends! I would like to know how I can make a FontAwesome icon receive formatting ONLY if the HTML element belongs to the status class.

With different styles for 3 FontAwesome icons, with the same class social

Ex:

<!-- O caso abaixo não é afetado pelo CSS, pois não tem o "social" dentro do class -->
<i class="fa fa-home"></i>

<!-- Já este outro caso será afetado pelo CSS, pois possui o "social" dentro do class -->
<i class="fa fa-home social"></i>
<i class="fa fa-book social"></i>
<i class="fa fa-pencil social"></i>

Thank you in advance.

css

asked by anonymous 11.09.2017 / 23:24

2 answers

2

Just add the respective class and its style:

.fa-book.status{
    color:tomato;
}
    
.fa-home.status{
    color:green;
}
    
.fa-pencil{
    color:blue;
}

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

     <i class="fa fa-home"></i>
        
     <i class="fa fa-book  status"></i>
     
     <i class="fa fa-pencil status"></i>
     
     <i class="fa fa-home status"></i>

11.09.2017 / 23:30

What is "\ x" in strings in Python? Is it possible to simulate safari on windows? [closed]

score 5 · Accepted Answer

5

The selector should look like this:

.status.fa {
    /*coloque o estilo aqui*/
}

It should not contain any spacing, so it would be separate but would refer to the same element.

11.09.2017 / 23:30