How to reference CSS children

Question

I have multiply CSS div's within a parent like this:

<div id="homepage">
     <div class="a"></div>
     <div class="b"></div>
     <div class="c"></div>
</div>

I am currently putting this in my CSS like this:

#homepage .a {
     background-color: #ff0000;
}

#homepage .b {
     background-color: #0000ff;
}

#homepage .c {
     background-color: #00ff00;
}

My question is there a better way to reference this in my CSS than what I am currently doing. I have tried this but it fails:

#homepage {
     .a {
          background-color: #ff0000;
     }
     .b {
          background-color: #0000ff;
     }
     .c {
          background-color: #00ff00;
     }
}

I thought about doing sass but I just wondered if there was a simple way to do it in css it's self — Cameron, Jan 17 '16 at 14:52
Simple answer: no - unless the classes are unique. If that's the case, you can leave out the ID. — Bram Vanroy, Jan 17 '16 at 14:56
If the classes are unique, then they should be IDs, @BramVanroy. — Shomz, Jan 17 '16 at 14:59
@Shomz They should be, but that's not in all cases possible. (E.g. when specific for a template.) — Bram Vanroy, Jan 17 '16 at 15:30

score 3 · Accepted Answer · answered Jan 17 '16 at 14:55

There is no way to do such things in plain CSS. You have to use a CSS preprocessor, for example Sass or Less.

Example of nesting selectors in Sass:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

It generates following CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

How to reference CSS children

1 Answers1