dots Created with Sketch.
Yogesh Chauhan's Blog

Selector Lists and Combinators in SCSS (Sass)

in SCSS on April 25, 2021

We know about basic nesting in SCSS (SassScript) but there is so much more than just basic nesting.

Selector Lists

Selector lists are nothing but comma-separated selectors. If you want to apply same nesting rule for more than one selectors, SCSS gives you an easy way to do it.

Just like this:

Each selector in the list is nested separately and then combined into a selector list.

Here’s the compiled CSS:


.alert ul, .alert p, .warning ul, .warning p {
    border: 1px solid white;
}

Selector Combinators

We can use nesting for the selectors that use combinators.

Just like this:

Here’s the compiled CSS:


ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
The SELECT DISTINCT Statement in SQLSQL/MySQLWhat are Controlled Components in React?ReactThe Drupal flowDrupalWhat are Conditional Tags in WordPress?WordPressHow to install Gulp with WordPress?WordPressHow to Make CSS Lists Bullets Smaller?CSSWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryHow to verify your domain in Google Console with a TXT record?MiscellaneousHow to refresh a page using PHP at regularly occurring intervals?PHPDifferent Types of Functions in JavaScriptJavaScriptThe Difference Between the echo and print Commands in PHPPHPCSS Overflow Property with ExamplesCSS