CODEWITHSUNDEEP
css
user10099265
user10099265

Reputation: 7

CSS get classes

I have to get some label in css, but there is few classes that i need to pass to get to one i want. I have 2 pages but i need to change only one, and i think it's possible because there is few differences in classes. This is HTML code of both.

<div class="col-sm-4">
  <div class="form-group has-input-icon  ">
   <label for="">Check in</label> <!--This label i need to catch-->

Second 

<div class="col-sm-6">
  <div class="form-group has-input-icon search-destination">
   <label for="">Destination</label>

In have to get label from first code, so how do i get this class with css? something like .col-sm-4->form-group->has-input-icon->label, i need to catch all of that classes to be more specific what i need to change, how to write it?

Upvotes: 0

Views: 96

Answers (2)

awe
awe

Reputation: 22462

Try this.

.col-sm-4 > .form-group.has-input-icon > label {
  color: red;
}

.col-sm-6 > .form-group.has-input-icon.search-destination > label {
  color: blue;
}
<div class="col-sm-4">
 <div class="form-group has-input-icon  ">
  <label for="">Check in</label> <!--This label i need to catch-->
 </div>
</div>
   
<div class="col-sm-6">
 <div class="form-group has-input-icon search-destination">
  <label for="">Destination</label>
 </div>
</div>

Explanation:

  • > means "first level children"
  • Mulitple selectors without space or other separators means that all those selectors must apply on same element. Example: .form-group.has-input-icon.search-destination means that all of these 3 classes must be on the selected element.

Upvotes: 1

DGRFDSGN
DGRFDSGN

Reputation: 675

To target the first element:

.col-sm-4 .form-group label {
    background:red
}

To target the second element:

.col-sm-4 .form-group.search-destination label {
    background:orange
}

To target the first, but exclude the second, and or others:

.col-sm-4 .form-group:not(.search-destination) label {
    background:orange
}

Upvotes: 1

Related Questions