CODEWITHSUNDEEP
cssselector
user961627
user961627

Reputation: 12747

Nested CSS styles?

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.

Upvotes: 0

Views: 521

Answers (4)

erenon
erenon

Reputation: 19118

You can do this:

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

The same can be generated by LESS or SASS.

Upvotes: 3

bob_cobb
bob_cobb

Reputation: 2269

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

Upvotes: 1

ThiefMaster
ThiefMaster

Reputation: 318468

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.

Upvotes: 1

darma
darma

Reputation: 4747

Sure that would be :

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

Upvotes: 2

Related Questions