Как создать комбинированный дочерний селектор в SASS?

Опубликовано: 1 Марта, 2022

Введение: давайте сначала поговорим о различных типах комбинаторов, доступных в CSS.

Комбинатор : Комбинатор - это то, что объясняет взаимосвязь между селекторами. Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

There are four different combinators in CSS:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)
  1. Descendant Selector: The descendant selector matches all elements that are descendants of a specified element.

    The following example selects all <p> elements inside <div> elements:

    div p {
     background-color: red;
    }
    
  2. Child Selector: The child selector selects all elements that are the children of a specified element.

    The following example selects all <p> elements that are children of a <div> element:

    div > p {
     background-color: red;
    }
    
  3. Adjacent Sibling Selector: The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

    The following example selects all <p> elements that are placed immediately after <div> elements:

    div + p {
     background-color: red;
    }
    
  4. General Sibling Selector: The general sibling selector selects all elements that are siblings of a specified element.

    The following example selects all <p> elements that are siblings of <div> elements:

    div ~ p {
     background-color: red;
    }
    

Now let’s talk about creating a combined child selector in SASS.

There are several ways to create a combined child selector in SASS.

See the examples given below.

Without the combined child selector you would probably do something like this:

card {
 outer {
   inner {
     color: red;
   }
 }
}

If you want to produce the same syntax with >, you can do this:

card {
 > outer {
   > inner {
     color: red;
   }
 }
}

Output:

The above code compiles to the given code in CSS:

card > outer > inner {
 color: red;
}

Or in SASS, it compiles to:

card
 > outer
   > inner
     color: red