Én af de nyere tilføjelser til CSS, som jeg er meget begejstret for er nested CSS selectors. En funktion, der tidligere har været forbeholdt preprocessors som f.eks. SCSS og lignende.
Traditionel CSS
header nav {
background-color: pink;
}
header a {
text-decoration: none;
}Nestet
Ovenstående CSS med nestede selectors
header {
nav {
background-color: pink;
}
a {
text-decoration: none;
}
}Pseudo selectors
Ved pseudo selectors kan man bruge &-tegn ved nesting.
/* Traditionel */
nav.primary > ul {
padding: 0;
}
nav.primary > ul > li {
list-style-type: none;
}
/* Nestet */
nav.primary {
& > ul {
padding: 0;
& > li {
list-style-type: none;
}
}
}I skrivende stund har jeg testet det i Chrome og i Edge, så det burde også virke i Safari da alle 3 browsere bruger Blink (browser engine). Jeg har også testet det i Firefox.
