CODEWITHSUNDEEP
htmlcss
user3420034
user3420034

Reputation:

Apply CSS to all elements inside div with class cascadingly or explicitly?

Ok, so I've just come across this: http://codepen.io/drygiel/pen/HBKyI

Which applies css to all elements in a div with a class like so:

.timeline {
    height: 100%;

    canvas {
        position: absolute;
        width: 100%;
    }
    figcaption {
        text-transform: uppercase;
    }
    h2 {
        color: #b2cde9;
    }
}

What I'm used to doing is this:

.timeline {
    height: 100%;
}

.timeline canvas {
    position: absolute;
    width: 100%;
}
.timeline figcaption {
    text-transform: uppercase;
}
.timeline h2 {
    color: #b2cde9;
}

Is this first option a good idea/possible at all? Would it work in older browsers?

I only mention this as I've never seen any mention of it before and I've been coding with CSS for 2 years now.

Upvotes: 0

Views: 146

Answers (3)

user229044
user229044

Reputation: 239541

The first example is LESS, a CSS preprocessor. That isn't valid CSS itself, it needs to be "compiled" into raw CSS. Codepen is doing that for you. The actual CSS generated by compiling the LESS will look nearly identical to your second example, but with less whitespace.

In fact, if we view the source of that iframe, we can see exactly how it has compiled, and that it is nearly identical to what you've written:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  color: #2C2C2C;
  min-width: 600px;
  height: 100%;
  background: white;
  font: 400 1em 'Lato';
  -webkit-font-smoothing: antialiased;
}
#timeline {
  padding-top: 5%;
}
.timeline {
  height: 100%;
  position: relative;
}
.timeline canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.timeline figcaption {
  font: 900 190% 'Lato';
  text-transform: uppercase;
  -webkit-text-stroke: .25px;
}
.timeline h2 {
  font: 400 400% 'Raleway';
  padding-bottom: 100px;
  color: #b2cde9;
}
.timeline h6 {
  color: #0090F5;
  font: 400 80% Tahoma;
}
.timeline p,
.timeline ol {
  font: 400 95% 'Raleway';
  padding: 3px 0 20px 0;
  color: #575757;
  text-align: justify;
  width: 70%;
}
.timeline ol {
  list-style: disc;
  margin-top: -20px;
  padding-left: 40px;
}
.timeline figure {
  float: right;
  width: 100%;
}
.timeline article {
  position: relative;
  width: 38%;
  overflow: hidden;
  margin-bottom: 100px;
}
.timeline article:first-of-type {
  float: left;
  text-align: right;
}
.timeline article:first-of-type p,
.timeline article:first-of-type figure {
  float: right;
}
.timeline article:last-of-type {
  float: right;
}
.timeline article:last-of-type h2 {
  color: #c6e0aa;
}
.timeline article:last-of-type h6,
.timeline article:last-of-type a {
  color: #40aa00;
}
.timeline article:last-of-type a:hover {
  color: #95D40D;
}

LESS and SASS are two common options for writing author-friendly CSS with nesting of selectors (among many other features) which compile to vanilla CSS for the browser.

Upvotes: 1

RBrandao
RBrandao

Reputation: 142

In the first way this is possible with Sass, which allows nesting in CSS selectors. Like this example:

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

  li { display: inline-block; }

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

Source: http://sass-lang.com/guide

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59292

It is LESS

LESS is Lean CSS, which is a css preprocessor, which gets compiled to CSS

You know it as it is mentioned in brackets.

Upvotes: 0

Related Questions