CODEWITHSUNDEEP
cssscss-mixins
Indiestartupman
Indiestartupman

Reputation: 63

Use of '&' in CSS

I got this CSS online and when I copy-paste this onto a code editor, I'm getting errors (multiple errors) starting with the first (&) in the code below. Could someone help me understand why this is happening? I haven't used & previously in CSS so don't know how it works.

body,html{
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}

.btn{
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;
    & + label{
        cursor: pointer;
        min-width: 60px;
        &:hover{
            background: none;
            color: #1a1a1a;
        }
        &:after{
            background: #1a1a1a;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }
    }
    &.toggle-left + label {
        border-right: 0;
        &:after{
            left: 100%
        }
    }
    &.toggle-right + label{
        margin-left: -5px;
        &:after{
            left: -100%;
        }
    }
    &:checked + label {
        cursor: default;
        color: #fff;
        transition: color 200ms;
        &:after{
            left: 0;
        }
    }
}

Upvotes: 2

Views: 1047

Answers (4)

Oneechan69
Oneechan69

Reputation: 198

The & nesting selector became available in browsers in December 2023: https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector.

Upvotes: 0

Abdullah Khan
Abdullah Khan

Reputation: 1473

It's the SCSS code you can use a VS Code extension for compiling the code before you check it on the browser or you can use the following CSS code or you can use an online website to convert the SCSS To CSS.

body, html {
     background: #efefef;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100%;
     z-index: -1;
}
 .btn {
     border: 3px solid #1a1a1a;
     display: inline-block;
     padding: 10px;
     position: relative;
     text-align: center;
     transition: background 600ms ease, color 600ms ease;
}
 input[type="radio"].toggle {
     display: none;
}
 input[type="radio"].toggle + label {
     cursor: pointer;
     min-width: 60px;
}
 input[type="radio"].toggle + label:hover {
     background: none;
     color: #1a1a1a;
}
 input[type="radio"].toggle + label:after {
     background: #1a1a1a;
     content: "";
     height: 100%;
     position: absolute;
     top: 0;
     transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
     width: 100%;
     z-index: -1;
}
 input[type="radio"].toggle.toggle-left + label {
     border-right: 0;
}
 input[type="radio"].toggle.toggle-left + label:after {
     left: 100%;
}
 input[type="radio"].toggle.toggle-right + label {
     margin-left: -5px;
}
 input[type="radio"].toggle.toggle-right + label:after {
     left: -100%;
}
 input[type="radio"].toggle:checked + label {
     cursor: default;
     color: #fff;
     transition: color 200ms;
}
 input[type="radio"].toggle:checked + label:after {
     left: 0;
}

Upvotes: 0

Ghost
Ghost

Reputation: 5049

That's LESS or SCSS, not CSS.

From the documentation:

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

The code you added can be converted into CSS:

body,
html {
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}
.btn {
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
    display: none;
}
input[type="radio"].toggle + label {
    cursor: pointer;
    min-width: 60px;
}
input[type="radio"].toggle + label:hover {
    background: none;
    color: #1a1a1a;
}
input[type="radio"].toggle + label:after {
    background: #1a1a1a;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
    border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
    left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
    margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after {
    left: -100%;
}
input[type="radio"].toggle:checked + label {
    cursor: default;
    color: #fff;
    transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
    left: 0;
}

Upvotes: 5

A Haworth
A Haworth

Reputation: 36566

It isn't pure CSS, it's probably for some pre processor like SCSS. You can convert it to real CSS though by hand (if it's not too long overall of course) by going down through the nesting and inserting the specific selector 'parents' instead of the ampersands. Here's an example of the first one:

   input[type="radio"].toggle {
        display: none;
        }
     input[type="radio"].toggle + label{
            cursor: pointer;
            min-width: 60px;
        }

Upvotes: 1

Related Questions