How to reference CSS children [duplicate]


Tags: css

Problem :

This question already has an answer here:

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;
     }
}


Solution :

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;
}

    CSS Howto..

    How can I avoid div from executing new line if one line is already full?

    How to apply CSS to a textbox?

    using css, how to position image so when resizing window, image will not move

    How to fit HTML table row to its content

    How to use Chrome Inspector to show the popup css for a jquery plugin

    How can I change the style of thumbnails?

    How to make a automatic image slider.?

    How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)

    How to add row highlight using html, css, and javascript?

    How remove space on around content (css)?

    How to style an anchor tag to look like a button with the same height as the button?

    table image in cell shown smaller [closed]

    How to style JavaScript created text using CSS's @font-face

    How do align images vertically centers with CSS and HTML?

    How to format a long
     HTML block suitable for width limited device such as iPhone

    How to hide a CSS media query from print? “not” logical operator does not work

    How to make the opposite effect of Hover in css [duplicate]

    how to make jquery transition smoothly

    How to not repeat a CSS background gradient

    How to top align two cell divs within a table div when one cell div contains an absolute positioned div?

    How to have responsive widths for labels and inputs using css

    How to show an arrow down symbol with CSS

    How to load content in a “virtual window” like “LightBox”

    How do I select columns including colspans in a table?

    how to make my horizontal css dock navigation to vertical

    Best practice: How to use (repeat) CSS style attributes correctly?

    CSS How to set div height 100% minus nPx

    How to order rows (or divs) vertically using blueprint css?

    How to attach user CSS to Microsoft Edge?

    How to add a background image or theme through CSS?