How to target the parent class from nested classes in SASS
You could use parent selector and invert your nesting in sass
.group-left {
.wrapper & {
background-color: blue;
}
.wrapper-child:nth-child(2n+2) & {
background: red;
}
}
How to select parent pseudo-class from within child using scss
So seems like this is really easy. Whoops.
You just do the following:
SCSS:
.child {
.parent:first-child & {
height: 50px;
}
}
This probably looks silly, but for my situation, it's actually useful.
Sass get parent or parent child
Is this logic useful?
Updated fiddle
SASS
.test{
&-modifier{
color: green;
}
&:hover &-modifier{
color: red;
}
}
HTML
<div class="test">
<div class="test-modifier">test</div>
</div>
Here is a couple of more variants based on the given comments
.test{
&-modifier{
color: green;
}
&-modifier2{
color: green;
}
&:hover &-modifier,
&:hover &-modifier2
{
color: red;
}}
.test{
&-modifier{
color: green;
}
&-modifier2{
color: green;
}
&:hover &-modifier2 {
color: red;
}
}
.test{
&-modifier{
color: green;
}
&-modifier2{
color: green;
}
&-modifier2:hover {
color: red;
}
}
SCSS modify parent selector
To make your last solution work, you can use @at-root.
body p {
& {
color: black;
}
@at-root #{selector-replace(&, "body", "body.other-mode")} {
color: red;
}
}
compiles to
body p {
color: black;
}
body.other-mode p {
color: red;
}
But personally, I find your original solution the most readable.body { &.other-mode p {color: red;} }
I find the split body
and p
more convenient in SCSS.
Select parent selector in SASS/SCSS
Either you write both the selectors with the full classname (without using &
) or you could save a reference to the .message
class and use it in the nested selector
.message {
display: block;
width: 300px;
border-radius: 5px;
border: 2px solid #000;
padding: 10px;
$this: &; /* reference to the .message class */
&__title {
font-size: 18px;
line-height: 1;
color: #000;
margin-bottom: 10px;
}
&__content {
font-size: 15px;
color: #000;
}
&--success {
border-color: #3f9442;
/* use the reference stored */
#{$this}__title {
color: #3f9442;
}
#{$this}__content {
color: #3f9442;
}
}
}
Target the same child with two differents parent class
In your code, if you are using &
it means that they are in the same element and in a single element there is only 1 ID. You should use a class
in that situation.
#header {
position: relative;
width: 100%;
header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
but it should be something like this. #header
and #header-gestion
are you ID parents while they have the same children which are .l-header-top
.
#header {
position: relative;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
#header-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
Or you use &
in this way which is based on BEM Methodology in class naming conventions. You can check this link: BEM — Block Element Modifier Methodology
#header {
position: relative;
width: 100%;
&-g {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
}
}
#header,
#header-g {
.l-header-top {
height: 55px;
line-height: 50px;
border-top: 5px solid #474747;
background-color: #f0f1f3;
font-size: 16px;
}
}
Related Topics
Convert 8-Digit Hex Colors to Rgba Colors
How to Align Nav Items to the Right in Bootstrap 5
How to Reset a CSS Variable (Aka Custom Properties) and Use the Fallback One
CSS Specificity and Inheritance
CSS Text Justify with Letter Spacing
How to Get the Nth Child of an Element Using CSS2 Selectors
What Disadvantages Are There to the <Button> Tag
Flex Auto Margin Not Working in Ie10/11
Webfont Smoothing and Antialiasing in Firefox and Opera
Select Inputs and Text Inputs in HTML - Best Way to Make Equal Width
Twitter's Bootstrap 3 Grid, Changing Breakpoint and Removing Padding
How to Force Re-Render After a Webkit 3D Transform in Safari
How Can a Variable-Height Sticky Footer Be Defined in Pure CSS
What Does '&.' in '&.Sub-Title' Indicates in SCSS
3 Columns, Center Column Fixed, Sides Fill Parents