Colors on a webpage change in shade based on location
So I am working on a website and I noticed something while working with a web page. The two elements are of the same class, but the shade of the colors is different. Does anyone know what might be causing something like this?
EDIT here are some of the code:
Class:
.summer{
background-color: #0077be;
/*background-image: -ms-linear-gradient(top, #0077be 0%, #fff 100%);
background-image: -moz-linear-gradient(top, #0077be 0%, #fff 100%);
background-image: -o-linear-gradient(top, #0077be 0%, #fff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0077be ), color-stop(100, #fff));
background-image: -webkit-linear-gradient(top, #0077be 0%, #fff 100%);
background-image: linear-gradient(to bottom, #0077be 0%, #fff 100%);*/
}
HTML:
<button onclick="prnt();">Print</button>
<div class="recipe" id="0">
<div class="tabs">
<a class="tab"> </a>
</div>
<div class="page">
<p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
</div>
</div> <!--recipe card end-->
<div class="recipe" id="1">
<div class="tabs">
<a class="tab">Chicken Clubhouse Sandwiches</a>
</div>
<div class="page">
<h1>Chicken Clubhouse Sandwiches</h1>
<div class="head">
<b>From: </b> <a href="#">Source</a><br>
<b>Makes: </b> 2 Sandwiches<br>
<button onclick="makeLink(1);">Share Link</button><br>
</div>
<div class="card">
<div class="pic">
<img src="/uploads/1/0/4/0/104012940/custom_themes/406340590114946394/files/images/lunch2.jpg">
</div>
<div class="ing">
<b>Ingredients</b>
<ul>
<li>6 slices of bread</li>
<li>6 Slices of bacon</li>
<li>Cooked chicken breast, cut into chunks</li>
<li>Shredded Lettuce</li>
<li>Sliced Tomato</li>
<li>Mayonnaise</li>
<li>Heinz Chili Sauce</li>
</ul>
</div>
<div class="pro">
<b>How to Make</b>
<ol>
<li>Toast the bread and cook the bacon</li>
<li>Assemble in the following order:
<ul>
<li>Toast</li>
<li>Mayo</li>
<li>Lettuce</li>
<li>Tomato</li>
<li>Toast</li>
<li>Chicken</li>
<li>Bacon</li>
<li>Chili Sauce</li>
<li>Toast</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div> <!--recipe card end-->
Class assignment:
function button(season){
switch(season){
case 1:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="spring";
});
break;
case 2:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className += "summer";
});
break;
case 3:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="fall";
});
break;
case 4:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.className+="winter";
});
break;
default:
Array.from(document.querySelectorAll('button')).map(function(button) {
button.style.backgroundColor="#FFF";
});
break;
}
}
+3
source to share
2 answers
you can try something like this
.container {
width: 300px;
height: 50px;
margin: 10px;
border: 1px solid gray;
}
.container:nth-of-type(3) {
border-color: red;
}
.container:nth-of-type(2) {
border-color: blue;
}
<div class="container">Content</div>
<div class="container">Content</div>
<div class="container">Content</div>
otherwise you can do with div id
.container {
width: 300px;
height: 50px;
margin: 10px;
border: 1px solid gray;
}
#divtwo.container {
border-color: red;
color:#fff;
background-color:#006678;
}
#divthree.container {
border-color: blue;
background-color:#009966;
}
<div id="divone" class="container">Content</div>
<div id="divtwo" class="container">Content</div>
<div id="divthree" class="container">Content</div>
+1
source to share