Css class targeting for specific div only

Question

I have

<div class="col-sm-1 col-1-box">
<span class="glyphicon glyphicon-ok"></span>

how can i use target glyphicon-glyphicon-ok only in this class col-sm-1 col-1-box?

I tried using

.col-1-box + .glyphicon .glyphicon-ok {     
  ...
}

but it doesn’t work, what am I doing wrong?

Answer 1

You can also try:

  .col-1-box > .glyphicon.glyphicon-ok {     
      border: 1px solid black;
    }

This is a direct child, not a recursive coincidence.

Answer 2

'+' for next sibling and space for all children

Like your html like this

<div class="col-sm-1 col-1-box">
    <span class="glyphicon glyphicon-ok"></span>
</div>

then CSS

.col-1-box .glyphicon.glyphicon-ok {     
   ... 
}

Answer 3

.glyphicon .glyphicon-ok

.col-1-box + .glyphicon.glyphicon-ok {     
  border: 1px solid black;
}

<div class="col-sm-1 col-1-box"></div>
<span class="glyphicon glyphicon-ok">Lorem Ipsum</span>

Hide result

Answer 4

  .col-sm-1.col-1-box .glyphicon.glyphicon-ok{.....}

Answer 5

, ,

.col-sm-1 span.glyphicon{
  color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-1 col-1-box">
<span class="glyphicon glyphicon-ok"></span>

Hide result

, ok ,

Answer 6

> :

.col-sm-1.col-1-box > .glyphicon.glyphicon-ok {  ...  }

Answer 7

HTML , .

<span class="awwwwyeah">
    <div class="col-sm-1 col-1-box">
    <span class="glyphicon glyphicon-ok"></span>
    </div> <!-- I assume the div ends somewhere -->
</span>

css

.awwwwyeah .col-1-box .glyphicon-ok{
    color: blue;
}

Answer 8

+ , ( ) . w3schooldoc.

+ .

.parentElement .childElement {
   /*Selected Children only*/
   background: red;
   width: 50px;
   height: 50px;
   display: inline-block;
 }
 .notImmediate {
   background: blue;
   width: 30px;
   height: 30px;
 }
.childElement + .childElement {
  /*Selected immediately after (not inside) */
   border-right: 10px solid green;
}

<div class="parentElement">
  <div class="childElement">
    <div class="notImmediate"></div>
  </div>
  <div class="childElement"></div>
</div>

Hide result

Answer 9

! :

body {
  color: #000;
}
/* scenario 1 */

.col-1-box + .glyphicon.glyphicon-ok {
  color: tomato;
}
/* scenario 2 */

.col-1-box .glyphicon.glyphicon-ok {
  color: aqua;
}

<h1>Scenario 1</h1>
<div class="col-sm-1 col-1-box"></div>
<span class="glyphicon glyphicon-ok">OK</span>

<hr>
<h1>Scenario 2</h1>
<div class="col-sm-1 col-1-box">
  <span class="glyphicon glyphicon-ok">OK</span>
</div>

Hide result