3

I have a class used on an article and a section HTML5 tag.

On the home:

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
    </a>
</article>

On the project page:

<section class="page project exit">
    <div class="corner nw intro">
        <figure class="box">
            <img src="assets/img/projects/exit.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
   </div>
   …

Each elements with the class exit have a figure HTML5 element inside. With Less, I use this code to do what I want.

article.exit{width:260px; height:200px; top:315px; left:505px;
    figure{background-color:@exit-bg;}
    .box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
    .box:hover{.perspective-box(nw, 10, @exit-shadow);}
    .intro figcaption:hover{background:@exit-hover;}
}

But I have to specify if it's an article or a section! I have a lot of classes like that and it's a little annoying…

Is there a solution to do something like this? It will be very cool…

.exit{
    &article{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}
flks
  • 527
  • 7
  • 25
  • CSS does not support nesting like. It would be oh-so-very-handy if it did, but the W3C is not about making life easy for people. – Marc B Sep 24 '12 at 01:16
  • 2
    Yep but I use LESS CSS, it accepts this nesting… maybe not what I search, but it works. http://lesscss.org/#-nested-rules – flks Sep 24 '12 at 01:28

1 Answers1

13

I kinda don't see much of a point in trying to nest these two rules if they won't share any common styles within the exit class.

That said, if you still want to nest them, remember that in selectors, element names always precede other simple selectors. Try placing the & after the element name and see if it works:

.exit{
    article&{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    section&{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}
BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • haha, seriously? I'll just have to reverse? ok… it works. Thank you! And I use this nested class to avoid a repetition of the class. It's more efficient for futures classes names changes! – flks Sep 24 '12 at 09:27
  • Nice, didn't know this was possible. – Christoph Leiter Sep 24 '12 at 14:48
  • Hehe, that's some nice usecase for our little discussion we had, http://stackoverflow.com/questions/11537260/less-css-abusing-the-operator-when-nesting ;) – Christoph Sep 24 '12 at 15:05
  • 1
    @Christoph: :) Just to be clear, `&article` and `&section` doesn't work here not because LESS doesn't allow it, but because it doesn't work as expected in CSS. – BoltClock Sep 24 '12 at 15:07
  • it works if you want to have rules for an element with the class `.exitarticle` :-D – Christoph Sep 24 '12 at 15:11
  • @Christoph: That's also true. – BoltClock Sep 24 '12 at 15:12