Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to prepend class to the selector

See original GitHub issue

In many cases it makes sense to have elements styled based on context.

For example:

We have standard HTML widget <article class="featured">…</article> used in both home page and featured posts pages. Yet home page has <body class="home-page">, featured <body class="featured-page"> (technique commonly used in WordPress and similar CMS’es)

All else being equal, we want our article in featured posts page to have bigger H1 text.

At the moment we would have to put custom new css rule away from the main H1 definition like

.featured{
    .heading {
        h1{
            color: nice;
            font-size: normal
        }
    }
    .. lots of other  css'es
}
.home .featured .heading h1 { font-size: bigger}

This makes our code nightmare to manage, as totaly related rules are separated 😕

However, if we just could have modifier to prepend css selectors to the stack like

.featured{
    .heading {
        h1{
            color: nice;
            font-size: normal;
            < .home {
                font-size: bigger;
            }
        }
    }
    .. lots of other  css'es
}

to compile to

.featured . heading h1 { color:nice; font-size: normal;}
.home .featured . heading h1 { font-size: bigger;}

This would be awesome 😃

Issue Analytics

State:
Created 11 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

2reactions

lukeapagecommented, Oct 25, 2012

use

.home &

to prepend.

0reactions

lukeapagecommented, Oct 25, 2012

It works but doesn’t group. There is a feature request to group…

Top Results From Across the Web

Prepend all CSS selectors - Stack Overflow

All I want, is to be able to prepend an ID "#content" to every selector in a css file. javascript · jquery ·...

Selectors - W3C

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes,...

Do we not have the ability to add class and id selectors to ...

I have been able to select the links using querySelectorAll but it wont let me add a class to the elements. The console...

Specificity - CSS: Cascading Style Sheets - MDN Web Docs

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, ......

CSS Selectors

So far, we have only been able to select every instance of a particular tag in ... In a case like that, you...