Skip to content

Instantly share code, notes, and snippets.

@johnlindquist
Created March 8, 2013 16:46
Show Gist options
  • Save johnlindquist/5117860 to your computer and use it in GitHub Desktop.
Save johnlindquist/5117860 to your computer and use it in GitHub Desktop.
.container input:checked + label,
.container input:checked + label:hover{
}
@joshuacc
Copy link

joshuacc commented Mar 8, 2013

I'd go with this:

.container input:checked + label {
    &:hover {

    }
}

@netzpirat
Copy link

You can reference the parent selector using the ampersand:

.container input:checked + label {
  &:hover{
  }
}

@johnlindquist
Copy link
Author

Is something like this possible without having to write out "&:checked + label" twice?

.container
  input
    &:checked + label, &:checked + label:hover

Copy link

ghost commented Mar 8, 2013

I haven't tried it, but something like the following SHOULD work:

 $labelForCheckBox: ".container input:checked + label";

 #{$labelForCheckBox}, #{$labelForCheckBox}:hover {
      //Insert styles here
 }

Alternatively you can do:

 #{$labelForCheckBox} {
      //// styles
      &:hover { @extend #{$labelForCheckBox} } //might be able to get away with << &:hover { @extend & } >>
 }

EDIT: BLEH, I can't get it to style correctly in this markup... but hopefully you get the gist.. (see what i did there?)

@joshuacc
Copy link

joshuacc commented Mar 8, 2013

You could do this:

.container {
    input {
        &:checked + label {
            color: red;

            &:hover {
                color: red;
            }
        }
    }
}

But that introduces some unnecessary repetition. Honestly, I might be inclined to keep your original example as-is, depending on the context.

@joshuacc
Copy link

joshuacc commented Mar 8, 2013

Ah. Here we go:

.container {
    input {
        &:checked {
            & + label,
            & + label:hover {
                color: red;
            }
        }
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment