CODEWITHSUNDEEP
jqueryhtmlcss
Da1D
Da1D

Reputation: 39

Border color not changing JQuery

$(document).ready(function() {
  $(".red").addClass("selected");
});
.selected {
  border-color: black;
}

.red {
  border: 4px solid red;
  height: 30px;
  width: 100%;
  background-color: red;
}

.colourbox {
  height: 30px;
  width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<script src="actions.js"></script>
<div class=" red colourbox">
</div>

Problem

On running the HTML file the border around the divison doesn't remain black and border-color: black is crossed out in chrome's developer tools

How do I change the border colour on adding the selected class ?

Upvotes: 1

Views: 500

Answers (3)

Abana Clara
Abana Clara

Reputation: 4650

Put selected below red to avoid having the red ruleset override selected's border-color property.

$(document).ready(function() {            
  $(".red").addClass("selected");     
});
.red {
  border: 4px solid red ;
  height: 30px;
  width: 100%;
  background-color: red;
}
.colourbox {
  height: 30px;
  width: 30px;
}
.selected {
  border-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red colourbox"></div>

Upvotes: 4

Gerard
Gerard

Reputation: 15786

It depends on your requirements. What you need to ask yourself is:

Do I always need a black border in combination with a red square?

If that is the case, use this solution. Do not define .selected but .red.selected. In that case the location does not matter.

$(document).ready(function() {
  $(".red").addClass("selected");
});
.red.selected {
  border-color: black;
}

.red {
  border: 4px solid red;
  height: 30px;
  width: 100%;
  background-color: red;
}

.colourbox {
  height: 30px;
  width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red colourbox">
</div>

If you want to apply the black border independently, you need to structure your code as follows:

$(document).ready(function() {
  $(".square").toggleClass("red selected");
});
.square {
  background-color: red;
}

.red {
  border: 4px solid red;
}

.colourbox {
  height: 30px;
  width: 30px;
}

.selected {
  border: 4px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square colourbox red">
</div>

Upvotes: 1

Abin Thaha
Abin Thaha

Reputation: 4633

Try this

You can put the .selected at the bottom of .red so that it will override the .red styles. Or use the nesting like I did. That will help you

$(document).ready(function(){
  $(".red").addClass("selected");  
});
.red {
    border: 4px solid red ;
    height: 30px;
    width: 100%;
    background-color: red;
}
.red.selected {
    border-color: black;
}

.colourbox {
    height: 30px;
    width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red colourbox"></div>

Upvotes: 1

Related Questions