Using multiple background colors on the Internet

Question

Sorry if the title is a bit misleading. What I'm trying to do is to cover my index page background with a very light gray, except for the section that displays my content.

<div class="col-sm-1">
</div>
<div class="col-sm-8">
</div>
<div class="col-sm-3">
</div>

I want col-sm-8 to be the only white and the rest to be gray. I can make col-sm-8 gray using css, but how can I do the opposite?

Answer 1

try it

[class*="col-"] {
    background : grey;
}

.col-sm-8{
  background: white;
}

well, what the [class*="col-"]selector does is that it will give a gray background to the values ​​of the attributes of the class, starting with col -

You can create individual classes by writing the fully qualified class name.

Answer 2

, , .

.

div:not(.col-sm-8){
 background-color:grey; 
}

<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>

, .

[class*="col-sm-"]:not(.col-sm-8){
 background-color:grey; 
}

<div class="col-sm-1">test1
</div>
<div class="col-sm-8">test8
</div>
<div class="col-sm-3">test3
</div>

: .

Answer 3

bootstrap (inline-css)

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container bg-info">

container <br/>container <br/>
 <div class="col-sm-1 bg-warning">
k
</div>
<div class="col-sm-8 bg-success">
k
</div>
<div class="col-sm-3 bg-warning">k
</div>

container <br/>container <br/>
</div>

Answer 4

[class*="col-"]:not(.col-sm-8)

[class*="col-"]:not(.col-sm-8){
 background-color:grey; 
}

<div class="col-sm-1">1
</div>
<div class="col-sm-8">2
</div>
<div class="col-sm-3">3
</div>

Answer 5

,

<div style="color:#0000FF"> //use the div name

css

[class*="col-"] {
    background : grey;
}

.col-sm-8{
  background: white;
}

Answer 6

.

.col-sm-1{
width:100%;
height:100px;
background:grey;
}
.col-sm-8{
width:100%;
height:100px;
background:white;

}
.col-sm-3{
  width:100%;
  height:100px;
 background:grey;
}

, .

Answer 7

I believe the answer provided by Jinu Kurian sounds like the answer you want, but in case you want everything to be light gray and col-sm-8 with a white background. That should work.

.container {
  background-color: grey;/*Replace this with a hex color value of a light grey to your preferance*/
  }
.col-sm-8 {
    background-color: white;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
  <div class="col-sm-1">
    <p>Lorem ipsum sit amet</p>
  </div>
  <div class="col-sm-8">
    <p>Lorem ipsum sit amet</p>
  </div>
  <div class="col-sm-3">
    <p>Lorem ipsum sit amet</p>
  </div>
  </div>

Run code