Asked 6 years, 7 months ago Viewed 5k times Is it possible in pure css to change the background-color of the body element depending of the id (or class) of the first div inside the body ?
For instance : <body>
// background-color is black
<div id="abc"> ... </div>
</body>
<body>
// background-color is red
<div id="cde"> ... </div>
</body>
cimmanon 65.5k16 gold badges162 silver
badges170 bronze badges asked Feb 6, 2016 at 1:35 3 No there's no way of doing this purely in CSS. You'll need to your javascript/jquery for that, which will change your body background for it. if ($('#abc')[0]) {
$('body').css('background','black')
}
if ($('#cde')[0]) {
$('body').css('background','red')
}
answered Feb 6, 2016 at 1:44
Joe SaadJoe Saad 1,9013 gold badges22 silver
badges32 bronze badges 1 Not the answer you're looking for? Browse other questions tagged html
css or ask your own question. Below is the code written once I came across similar kind of problem. Hope this will help you. You may write it in footer and this will change the color of target cells of result page based on conditions: <script language="javascript" type="text/javascript">
var tbl = document.getElementsByTagName('table')[0];
var rows = tbl.getElementsByTagName('tr');
for (var row=1; row<rows.length;row++)
{
var cels = rows[row].getElementsByTagName('td'); if(cels[2].innerHTML=='P'){
cels[2].style.backgroundColor = '#ABEBC6';
}
else if(cels[2].innerHTML=='M'){
cels[2].style.backgroundColor = '#145A32';
}
else if(cels[2].innerHTML=='C'){
cels[2].style.backgroundColor = '#FDEDEC ';
} if(cels[6].innerHTML==4){
cels[6].style.backgroundColor = '#D4EFDF';
}
else if(cels[6].innerHTML==3){
cels[6].style.backgroundColor = '#82E0AA';
}
else if(cels[6].innerHTML>4 && cels[6].innerHTML<8){
cels[6].style.backgroundColor = '#F7F386';
} else if(cels[6].innerHTML>=8){
cels[6].style.backgroundColor = '#E5CA8D';
} if(cels[13].innerHTML==0){
cels[13].style.backgroundColor = '#ED0F71';
}
else if(cels[13].innerHTML>55){
cels[13].style.backgroundColor = '#F8CFE1';
} if(cels[21].innerHTML==1){
cels[21].style.backgroundColor = '#D4CBCF';
}
if(cels[23].innerHTML==0){
cels[23].style.backgroundColor = '#D4CBCF';
}
cels[26].style.color='red';
cels[26].style.fontWeight ='bold'; cels[27].style.color='blue';
cels[27].style.fontWeight ='bold'; cels[28].style.color='green';
cels[28].style.fontWeight ='bold'; if(cels[29].innerHTML==1){
cels[29].style.backgroundColor = '#F5B041';
} if(cels[30].innerHTML>0){
cels[30].style.backgroundColor = '#F1C40F';
}
}
</script> The background-color CSS property sets the background color of an element. Syntax/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
/* HSL value */
background-color: hsl(50, 33%, 25%); /* Fully opaque */
background-color: hsla(
50,
33%,
25%,
0.75
); /* 75% opaque, i.e. 25% transparent */
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;
The background-color property is specified as a single <color> value. Values<color>
The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concernsIt is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the
text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. - WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
background-color =
<color> HTML<div class="exampleone">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="exampletwo">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="examplethree">
Lorem ipsum dolor sit amet, consectetuer
</div>
CSS.exampleone {
background-color: transparent;
}
.exampletwo {
background-color: rgb(153, 102, 153);
color: rgb(255, 255, 204);
}
.examplethree {
background-color: #777799;
color: #ffffff;
}
Specifications
| Specification |
|---|
CSS Backgrounds and Borders Module Level 4
# background-color
|
Browser compatibilityBCD tables only load in the browser
How do I change the background color on my condition?
Answer:. Right-click on the field.. Select Format Field to open the Format Editor window.. On the Border tab, click the X+2 button across from "Background". Enter the condition on which to change the background color of the field. For example: if {Gf_Amount} > 1000 then crRed else crWhite.. How do you override background color in CSS?
If that class has a background-color of blue, and you want your <div> to have a red background instead, try to change the color from blue to red in the class itself. You could also create a new CSS class that defined a background-color property with a value of red and let your <div> reference that class.
What is the CSS code for background color?
Background-color values can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000. Background-color values can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).
How do I apply a CSS condition?
CSS Conditional Rules are nothing but a feature of CSS in which the CSS style is applied based on a specific condition. So the condition here can be either true or false and based on the statements/style will get executed.. @supports.. @media.. @document.. | 
