Combinatoren in geneste selectoren

Dit artikel legt combinatoren uit in geneste selectoren.

We leggen uit hoe je combinatoren gebruikt in geneste selectoren met SASS en geven voorbeeldcode om het stap voor stap te begrijpen.

YouTube Video

Combinatoren in geneste selectoren

In SASS kun je CSS-selectors beknopt schrijven op basis van ouder-kindrelaties, maar je moet goed opletten bij het juist toepassen van combinatoren zoals de afstammeling- en aangrenzende selector.

Basisprincipes van geneste selectoren

In SASS kun je door het nesten van kind-selectoren binnen ouder-selectoren, ouder-kindrelaties duidelijk en beknopt weergeven in CSS.

Voorbeeld: Basis van geneste selectoren

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Gecompileerde CSS

1.nav ul li {
2    color: blue;
3}

Referentie naar ouder-selector (&)

De & van SASS wordt gebruikt om naar de huidige ouder-selector te verwijzen.

Combineren van combinatoren en &

Door gebruik te maken van & kun je flexibele selectors opbouwen.

Voorbeeld

1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}

Gecompileerde CSS

1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Afgekorte notatie voor &

In SASS, wanneer een combinator aan het begin van een selector wordt geplaatst, wordt de ouder-selector impliciet ingevoegd, waardoor je de & kunt weglaten.

Gevallen waarin weglaten mogelijk is

Wanneer je bijvoorbeeld + .item schrijft, interpreteert SASS dit intern als & + .item en genereert automatisch de combinatie met de ouder-selector.

Voorbeeld

1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}

Gecompileerde CSS

1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Overzicht van combinatoren

CSS-combinatoren bepalen de relatie tussen selectors. De volgende zijn de belangrijkste soorten combinatoren.

1. Afstammeling-selector (spatie) Een afstammeling-selector selecteert alle afstammelingen die zich binnen een ouder-element bevinden. Voorbeeld: .parent .child

2. Kind-selector (> ) Een kind-selector selecteert alleen de directe kind-elementen. Voorbeeld: .parent > .child

3. Aangrenzende selector (+) Een aangrenzende selector selecteert het direct volgende aangrenzende broederelement. Voorbeeld: .sibling1 + .sibling2

4. Algemene broeder-selector (~) De algemene broeder-selector selecteert alle volgende broederelementen op hetzelfde niveau. Voorbeeld: .sibling1 ~ .sibling2

Hoe combinatoren te gebruiken in SASS

Afstammeling-selector (spatie)

Bij geneste selectoren in SASS wordt de afstammeling-selector (spatie) standaard toegepast.

Voorbeeld

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

Gecompileerde CSS

1.container .header .title {
2    font-size: 20px;
3}

Kind-selector (> )

Als je een kind-selector wilt gebruiken, schrijf dan expliciet > in je SASS-code.

Voorbeeld

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

Gecompileerde CSS

1.container > .header > .title {
2    font-size: 20px;
3}

Aangrenzende selector (+)

Gebruik + om het direct volgende broederelement te stylen.

Voorbeeld

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

Gecompileerde CSS

1.item + .item {
2    margin-top: 10px;
3}

Algemene broeder-selector (~)

Gebruik ~ om alle volgende broederelementen op hetzelfde niveau te stylen.

Voorbeeld

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

Gecompileerde CSS

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-klassen en pseudo-elementen met geneste selectoren

Pseudo-klassen en pseudo-elementen kunnen ook eenvoudig met SASS worden geschreven.

Voorbeeld

1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}

Gecompileerde CSS

1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Praktisch voorbeeld

Hieronder staat een voorbeeld van een complexe stijl die meerdere combinatoren combineert.

SASS-code

 1.menu {
 2    .menu-item {
 3        & > .submenu {
 4            display: none;
 5
 6            & > .submenu-item {
 7                font-size: 14px;
 8            }
 9        }
10        & + .menu-item {
11            margin-left: 15px;
12        }
13    }
14}

Gecompileerde CSS

1.menu .menu-item > .submenu {
2    display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5    font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8    margin-left: 15px;
9}

Samenvatting

Als je geneste selectoren en combinatoren in SASS goed begrijpt, kun je beknopte en leesbare CSS schrijven.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video