Change Div Background Color on Click Using Only CSS

Change div background color on click using only css

Make your DIVs focusable, by adding tabIndex:

<div tabindex="1">
Section 1
</div>

<div tabindex="2">
Section 2
</div>

<div tabindex="3">
Section 3
</div>

Then you can simple use :focus pseudo-class

div:focus {
    background-color:red;
}

Demo: http://jsfiddle.net/mwbbcyja/

Change background color of div on click (CSS only)

:focus-within can help you here:

.active {
  background-color: grey;
}

.parent:focus-within * { /* rest all background when one element is focused */
  background: none;
}

.parent [tabindex]:focus { /* set the background of only the focused one */
  background-color: grey;
}

<div class="parent" tabindex="0">

  <div class="one active" tabindex="1">
    one
  </div>

  <div class="two" tabindex="2">
    two
  </div>

  <div class="three" tabindex="3">
    three
  </div>

</div>

How to change the background color of div onclick?

Rather than trying to assign the class based on ID (which as pointed out is not correct to have duplicates), you could instead just use the event target:

function select(e) {  // Unset selected class from other options  const selected = document.querySelectorAll('.option-list .option-selected');  selected.forEach(function(el) {    el.classList.remove('option-selected');  });  e.target.classList.add('option-selected');}

.option {  background-color: #FFFFFF;  padding: 5px;}.option-selected {  background-color: #008080;  color: #FFFFFF;}

<div class="option-list">  <div class="option option-selected" onclick="select(event)">Option 1</div>  <div class="option" onclick="select(event)">Option 2</div>  <div class="option" onclick="select(event)">Option 3</div></div>

Change background on button click, using CSS only?

Based on the fiddle I posted in the comments I've modified it very slightly to use the Bootstrap button CSS.

Just include Bootstrap's CSS file then use the code below.

HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

This uses the adjacent sibling selector.

Here it is working: http://jsfiddle.net/eYgdm/ (I've added *-user-select: none; to prevent selection of the label text but it's not required for the label to work)

Browser support

Chrome, Firefox [Desktop & Mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 and Safari ≥ 3
References: Attribute selectors and Adjacent sibling selectors

Setting background color of div on click

<div class="radiodiv" onclick=selected(this)>one</div>
<div class="radiodiv" onclick=selected(this)>two</div>
<div class="radiodiv" onclick=selected(this)>three</div>
<div class="radiodiv" onclick=selected(this)>four</div>
<div class="radiodiv" onclick=selected(this)>five</div>
<div class="radiodiv" onclick=selected(this)>six</div>
<div class="radiodiv" onclick=selected(this)>seven</div>

<script>
var divItems = document.getElementsByClassName("radiodiv");

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'red';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}
</script>

When item is clicked change background color - CSS (Without jQuery)

With pure CSS there's a trick with a checkbox and :checked pseudoelement.

See it working: https://jsfiddle.net/e3ux2ffb/3/

CSS

 input[type=checkbox] { display: none; }
 input[type=checkbox]:checked + label { background:white;}

HTML

  <div class="top">
       <input type="checkbox" id="chckbx">
       <label for="chckbx" class="icon">
            <span><hr><hr><hr></span>
       </label>
  </div>

How can i change the background color of each individual div using state in Reactjs by clicking a button?

You can use a count in your state instead of the colour, so you know which div you want to set the background on:

class Page extends Component {
  constructor(props) {
      super(props);
      this.state = {
          count: 0
      }
  }
  changeColor = () => {
    let next = this.state.count + 1;
    if (next === 4) {
      next = 0;
    }
    this.setState({count: next})
  }

  render() {
    return (
      <>
        <div className="box" style={{ background: this.state.count === 1 ? "blue" : "white" }}>a</div>
        <div className="box" style={{ background: this.state.count === 2 ? "blue" : "white" }}>b</div>
        <div className="box" style={{ background: this.state.count === 3 ? "blue" : "white" }}>c</div>
        <button onClick={this.changeColor}>Click me</button>
      </>
    );
  }
}

Each div is responsible for setting its own background. I also put a, b, and c in the divs as they did not display without any content.

Change Div Background Color on Click Using Only CSS