Is it time to go back to the parent selector using the ampersand symbol?

Question

Is it time to go back to the parent selector using the ampersand symbol?

I recently started using Less for writing CSS, and it has definitely been a time-saver for me. However, I have encountered a small issue with my code:

<a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a>

Less

.btn{
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &-black-bg{
        background: @color-black;
        color: @color-white;
    }

    &-right-skew{
        position: relative;

        &:after{
            content: '';
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            .skewX(-15deg);
        }
    }
}

My objective now is to have the btn-right-skew also show a black background if btn-black-bg is present. In regular CSS, I could achieve this with the following code:

.btn-black-bg.btn-right-skew:after{
    background: #000;
}

However, I am unsure how to accomplish this using LESS. Any help or suggestions would be greatly appreciated.

html css less

Answer 1

Answer №1

After reviewing your HTML code, it appears that by adding background: #000 to the .btn-black-bg:after class alone should suffice. However, if you wish to apply certain properties only when both classes are present on the same element, you can utilize the parent selector as shown below:

.btn {
    &-black-bg&-right-skew:after {
        background: #000;
        color: #fff;
    }
}

It's important to note that nesting this within the &-black-bg or &-right-skew is not possible due to the order of classes being irrelevant in CSS. Consequently, the parent selector will always refer to the entire parent element rather than just the immediate parent. The closest form of nesting would involve the following structure, where the .btn class needs to be statically added to the innermost selector instead of using &:

.btn {
    &-black-bg {
        &.btn-right-skew:after {
            background: #000;
            color: #fff;
        }
    }
}

While variables can technically achieve nesting as described here, I do not recommend such an approach for your specific case since the aforementioned selector is clearer and more straightforward.

Answer 2

After reviewing your HTML code, it appears that by adding background: #000 to the .btn-black-bg:after class alone should suffice. However, if you wish to apply certain properties only when both classes are present on the same element, you can utilize the parent selector as shown below:

.btn {
    &-black-bg&-right-skew:after {
        background: #000;
        color: #fff;
    }
}

It's important to note that nesting this within the &-black-bg or &-right-skew is not possible due to the order of classes being irrelevant in CSS. Consequently, the parent selector will always refer to the entire parent element rather than just the immediate parent. The closest form of nesting would involve the following structure, where the .btn class needs to be statically added to the innermost selector instead of using &:

.btn {
    &-black-bg {
        &.btn-right-skew:after {
            background: #000;
            color: #fff;
        }
    }
}

While variables can technically achieve nesting as described here, I do not recommend such an approach for your specific case since the aforementioned selector is clearer and more straightforward.

Answer 3

Answer №2

One suggestion is to organize the classes by creating a base class "btn" and additional modifier classes like "black-bg" and "right-skew". This approach can make it clearer how styles are being applied and combined.

Take a look at my example on codepen: http://codepen.io/fabiandarga/pen/bVNpLE

<a href="#" class="btn black-bg right-skew">largest fight gym in Australia</a><br /><a href="#" class="btn green-bg right-skew">largest fight gym in Australia</a>

Here is the CSS:

.btn {
    display: inline-block;
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &.black-bg {
        background: @color-black;
        color: @color-white;
    }
    &.green-bg {
        background: @color-green;
        color: @color-white;
    }

    &.right-skew {
        position: relative;

        &.black-bg {
            &:after {
                background: @color-black;
            }
        }
        &.green-bg:after {
            background: @color-green;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            transform: skewX(-15deg);
        }
    }
}

Answer 4

One suggestion is to organize the classes by creating a base class "btn" and additional modifier classes like "black-bg" and "right-skew". This approach can make it clearer how styles are being applied and combined.

Take a look at my example on codepen: http://codepen.io/fabiandarga/pen/bVNpLE

<a href="#" class="btn black-bg right-skew">largest fight gym in Australia</a><br /><a href="#" class="btn green-bg right-skew">largest fight gym in Australia</a>

Here is the CSS:

.btn {
    display: inline-block;
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &.black-bg {
        background: @color-black;
        color: @color-white;
    }
    &.green-bg {
        background: @color-green;
        color: @color-white;
    }

    &.right-skew {
        position: relative;

        &.black-bg {
            &:after {
                background: @color-black;
            }
        }
        &.green-bg:after {
            background: @color-green;
        }
        &:after {
            content: '';
            display: block;
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            transform: skewX(-15deg);
        }
    }
}

Is it time to go back to the parent selector using the ampersand symbol?

Answer №1

Answer №2

Similar questions

The button remains active in Internet Explorer 10 and cannot be disabled

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Switching the keyboard language on the client side of programming languages

Assist in HTML to exhibit the display name property devoid of a label

Automatically adjust height directive to fill up the remaining space

Poor mapping on Google Maps API

What is the best way to display and conceal various elements with each individual click?

displaying a separate HTML file with its own distinct CSS styling

Exploring HTML segments with Python and BeautifulSoup

Click on the button to convert the content of the text area into a variable

What is the process for adjusting the switch size in react-bootstrap?

Issue with Chrome related to svg getScreenCTM function

The error message "email() is not a valid function when using the onclick attribute

How can you trigger a modal to appear when an image is clicked?

Transmitting the identification number of a post with the help of J

The width of table columns is altered upon the second rendering in JQuery DataTables

Conceal excessive content on elements set in a stationary position

Using Javascript to dynamically swap images within a div as the user scrolls

What is causing my radio button event to activate when a separate radio button is selected?

What is the best way to reveal CSS files downloaded via npm?