Nested CSS styles?

Question

Is something like this possible?

.imgbox:hover{ .ui-resizable-se { /*some style */ } }

Or a conceptual equivalent? Basically, only when an element of a certain class is hovered over, then some element within that class should change some style.

.imgbox:hover .ui-resizable-se { /*some style */ } Ignore the less/sass answers - they misunderstand the extremely simply problem and shoot canon balls at your fly. Not saying anything against sass/less, but whether to use that or not is a WHOLE other issue. — Mörre
– Mörre, Commented Feb 10, 2013 at 12:19

erenon · Accepted Answer · 2013-02-10 12:20:12Z

3

You can do this:

.imgbox:hover .ui-resizable-se { /*some style */ }

The same can be generated by LESS or SASS.

answered Feb 10, 2013 at 12:20

erenon

19.2k2 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darma · Accepted Answer · 2013-02-10 12:19:48Z

2

Sure that would be :

.imgbox:hover .ui-resizable-se { /*some style */ }

answered Feb 10, 2013 at 12:19

darma

4,7571 gold badge27 silver badges26 bronze badges

Comments

ThiefMaster · Accepted Answer · 2013-02-10 12:19:49Z

1

No, CSS does not allow nesting. You'd have to write it like this:

.imgbox:hover .ui-resizable-se { /*some style */ }

However, there are various CSS preprocessors available which convert something like this in valid CSS. The most popular ones are LESS and SASS/SCSS.

answered Feb 10, 2013 at 12:19

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Comments

bob_cobb · Accepted Answer · 2013-02-10 12:19:49Z

1

Not with plain CSS but you can with a CSS preprocessor like Sass:

http://sass-lang.com/

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Generates:

/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

answered Feb 10, 2013 at 12:19

bob_cobb

2,28911 gold badges52 silver badges115 bronze badges

Collectives™ on Stack Overflow

Nested CSS styles?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related