Cant change the background color on specific divs

Question

im new in CSS, im attempting to build a pretty simple website, i have the layout pretty much done, the problem now is that when i enter specific background-color properties for divs B+c, B and C it dosen't seem to take any effect, ive checked other questions and i know i should use overflow:hidden; also tried clear:both; but none of them seem to work, could you point me in to what im doing wrong?

<!doctype html>
<html>
<style>
  body {
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
    background-color: white;
    background-size: 70%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  
  #A {
    overflow: hidden;
    border: none;
  }
  
  object {
    width: 1500px;
    height: 800px;
    display: inline-block;
  }
  
  #B {
    background-color: #777676;
    clear: both;
    display: flex;
    overflow: hidden;
    margin-left: -10px;
    border: none;
    width: 600px;
    border: thick;
    height: 300px;
    display: inline-block;
    margin-right: 0px;
    float: left;
  }
  
  #C {
    background-color: #777676;
    clear: both;
    display: flex;
    flex: 0 1 auto;
    overflow: hidden;
    border: thick;
    width: 1250px;
    height: 300px;
    display: inline-block;
    margin-right: -10px;
  }
  
  #B+C {
    background-color: #777676;
    clear: both;
    overflow: hidden;
    border: none;
    width: 1900px;
    height: 1000px;
  }
  
  .webmaster {
    background-color: #777676;
    clear: both;
    margin-left: -10px;
    background-color: white;
    overflow: hidden;
    height: 80px;
    width: 1920px;
    border: none;
    font-family: Georgia;
    text-align: justify;
    padding: 20px 640px;
    font-size: 20px;
    margin-top: -5px;
  }
  
  a:link {
    text-decoration: none;
    color: #000000;
  }
  
  a:visited {
    text-decoration: none;
    color: #4C4C4C;
  }
  
  a:hover {
    text-decoration: none;
    color: #B2B2B2;
  }
  
  a:active {
    color: #000000;
    text-decoration: underline;
  }
</style>

<head>
  <meta charset="utf-8">
  <title>Rodriguez Tullio Propiedades</title>
</head>

<body>

  <div id="A">
    <object type="text/html" data="A.html">
</object></div>
  <div id="B+C">
  </div>
  <div id="B">
    <object type="text/html" data="B.html">
</object></div>
  <div id="C">
    <object type="text/html" data="C.html">
</object></div>

  <div class="webmaster">2017 | <a href="mailto:webmaster@tullio.com.ar">webmaster@tullio.com.ar</a> |</div>


</body>

</html>

A `+` in CSS is an [adjacent sibling selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors), you should not be using it in your `IDs`. — APAD1, Mar 14 '17 at 20:04
Refer to the top answer [here](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Eric Goncalves, Mar 14 '17 at 20:06

Matt Spinks · Accepted Answer · 2017-03-14T20:52:47.740

Two problems here:

You cannot use B+C as your id attribute. According to the docs:

The value must not contain any space characters. HTML 4: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

B+C uses a specific adjacent operator (the + symbol). In CSS, this means that the style definition will target a DOM element with the tag C that immediately follows a DOM element with the tag B.

First, in your HTML markup, try changing id="B+C" to id="D". Then, in your CSS, change #B+C to #D

Working example: https://jsfiddle.net/gkh2pj2j/1/

Hi Matt, thanks for your response, ive deleted b+c from everywhere in the code (the page work the same withouth it) and i still can't change the background color on B or C — TEDEDFRED, Mar 14 '17 at 20:28

score 0 · Answer 2 · answered Mar 14 '17 at 20:11

The '+' symbol is reserved as kind of an operator in CSS. It will grab #C after #B (the code being #B+#C). So, I'd recommend changing your B+c id to B-plus-C (if that name is suitable to you). I edited your code, both the id and the css styling. I changed the background-color to red, but don't worry I left your color as commented. I just wanted to make it really obvious that the element color has been changed.

body {
    background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
    background-color: white;
    background-size: 70%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  
  #A {
    overflow: hidden;
    border: none;
  }
  
  object {
    width: 1500px;
    height: 800px;
    display: inline-block;
  }
  
  #B {
    background-color: #777676;
    clear: both;
    display: flex;
    overflow: hidden;
    margin-left: -10px;
    border: none;
    width: 600px;
    border: thick;
    height: 300px;
    display: inline-block;
    margin-right: 0px;
    float: left;
  }
  
  #C {
    background-color: #777676;
    clear: both;
    display: flex;
    flex: 0 1 auto;
    overflow: hidden;
    border: thick;
    width: 1250px;
    height: 300px;
    display: inline-block;
    margin-right: -10px;
  }
  
  #B-plus-C {
    /*background-color: #777676;*/
 background-color:red;
    clear: both;
    overflow: hidden;
    border: none;
    width: 1900px;
    height: 1000px;
  }
  
  .webmaster {
    background-color: #777676;
    clear: both;
    margin-left: -10px;
    background-color: white;
    overflow: hidden;
    height: 80px;
    width: 1920px;
    border: none;
    font-family: Georgia;
    text-align: justify;
    padding: 20px 640px;
    font-size: 20px;
    margin-top: -5px;
  }
  
  a:link {
    text-decoration: none;
    color: #000000;
  }
  
  a:visited {
    text-decoration: none;
    color: #4C4C4C;
  }
  
  a:hover {
    text-decoration: none;
    color: #B2B2B2;
  }
  
  a:active {
    color: #000000;
    text-decoration: underline;
  }

<head>
  <meta charset="utf-8">
  <title>Rodriguez Tullio Propiedades</title>
</head>

<body>

  <div id="A">
    <object type="text/html" data="A.html">
</object></div>
  <div id="B-plus-C">
  </div>
  <div id="B">
    <object type="text/html" data="B.html">
</object></div>
  <div id="C">
    <object type="text/html" data="C.html">
</object></div>

  <div class="webmaster">2017 | <a href="mailto:webmaster@tullio.com.ar">webmaster@tullio.com.ar</a> |</div>

ok, so ive deleted the layer that was joining together B and C (apparently it was useless), but now i cant change the backgrounds on B or C. i cant seem to place my code in the comment, but its simply the same code erasing B+C — TEDEDFRED, Mar 14 '17 at 20:22

Cant change the background color on specific divs

2 Answers2