Nesting Element+Element Selector in SCSS

Nesting element+element selector in SCSS

Upate: In this case all you need to do is to nest rules like this:

.test {
color: red;
+ label {
color: blue;
}
}

However, you can also use the & selector to achieve the same effect like this:

.test {
color: red;
& +label {
color: blue;
}
}

Sass .scss: Nesting and multiple classes?

You can use the parent selector reference &, it will be replaced by the parent selector after compilation:

For your example:

.container {
background:red;
&.desc{
background:blue;
}
}

/* compiles to: */
.container {
background: red;
}
.container.desc {
background: blue;
}

The & will completely resolve, so if your parent selector is nested itself, the nesting will be resolved before replacing the &.

This notation is most often used to write pseudo-elements and -classes:

.element{
&:hover{ ... }
&:nth-child(1){ ... }
}

However, you can place the & at virtually any position you like*, so the following is possible too:

.container {
background:red;
#id &{
background:blue;
}
}

/* compiles to: */
.container {
background: red;
}
#id .container {
background: blue;
}

However be aware, that this somehow breaks your nesting structure and thus may increase the effort of finding a specific rule in your stylesheet.

*: No other characters than whitespaces are allowed in front of the &. So you cannot do a direct concatenation of selector+& - #id& would throw an error.

SASS nesting class selectors in an element selector doesn't work

I found the answer in one of the related questions off to the side after I posted: Sass .scss: Nesting and multiple classes?

I need to use the & related parent selector in the SCSS to make sure the selectors are concatenated together instead of separated.

This SASS code works:

div {
//various page elements
&.page_header {
clear: both;
float: left;
color: $text-color-light;
background-color: #2C3E50;
}

&.page_header_title {
clear: left;
float: left;
}
}

And results in the proper CSS output:

div.page_header {
clear: both;
float: left;
color: #ECF0F1;
background-color: #2C3E50; }
div.page_header_title {
clear: left;
float: left; }

More info can be found here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

Is there a way to nest CSS selectors?

With the current CSS (2.1) version, nesting selectors isn't possible.

You'll have to use something called a CSS preprocessor which does several things, including allowing nested selectors.

I'd recommend SASS (SCSS), and another out there is LESS. You'll need some extra things setup on your PC/Mac for automatically converting preprocessor files to regular CSS files - plenty of other questions and research points on that out there.

If you use SCSS, you can check out what its like on SassMeister so you can see what the nested selectors will look like compiled.

SCSS syntax for nesting child selector using '&' with space?

A good practice is to use & sign when you have multiple classes on elements or you have elements with custom classes, like title-thin, title-bold, title-regular, where you will use the following syntax:

.title{
&-thin{
...
}
&-bold{
...
}
&-regular{
...
}
}

For the child elements don't use the & operator. There could be some misunderstandings from some developers which could join the project.

Technically you can use the & with space to style the child elements, but for architecture is not good.

How to apply CSS to nth nested element?

If you want to apply the CSS last-child then you can try this code:
You can add the class for every div

.parent div:nth-last-child(1) .target{
background: #000000;
color: #fff;
}

Nesting tag name into class style in SCSS

Its not nesting, its two different elements, try as below to achieve as you want

.class-name {
font-size: 40px;
}

a.class-name {
color: #ff6666;
}

Or in nested way

a{
&.class-name{
color: #ff6666;
}
}

It not possible to target parent class from child

Get more details from this Answer



Related Topics



Leave a reply



Submit