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
What Exactly Does This CSS Selector with a Comma Match
HTML5 Footer - Margin That I Can't Remove
If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes
Creating a Fixed Background for a Website
Place View on Top of Other View in React Native
Scrolling Effect: Slow at First Than It Goes Fast
Requirejs: Loading Modules Including Templates and CSS
One CSS File or Individual CSS Files for Each Page
Specifing Width of a Flexbox Flex Item: Width or Basis
Rotating Animation Doesn't Work with Chrome
Wrap Bootstrap Navbar List Items Around Centered Brand Image
Childrens Selectors from Sibling Parent Divs Using CSS for Hover Effect
How to Replace The Web Font with Svg Icon in CSS(Font Awesome)
Best Practices for Modifying Foundation CSS Framework