CSS-klassen nesten

Kan ik zoiets als het volgende doen?

.class1{some stuff}
.class2{class1;some more stuff}

Antwoord 1, autoriteit 100%

Niet mogelijk met vanilla CSS. U kunt echter iets gebruiken als:

• Sass

Sass maakt CSS weer leuk. Sass is een
extensie van CSS3, geneste . toevoegen
regels, variabelen, mixins, selector
erfenis, en meer. Het is vertaald
naar goed opgemaakte, standaard CSS met behulp van
de opdrachtregeltool of a
plug-in voor webframework.

Of

• Minder

In plaats van een lange selector te maken
namen om overerving te specificeren, in Less
je kunt selectors eenvoudig binnenin nesten
andere selecteurs. Dit maakt
erfenis clear en style sheets
korter.

Voorbeeld:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Antwoord 2, autoriteit 92%

Update 1:Er is een CSS3-specificatie voor het nesten van CSS-niveau 3. Het is momenteel een concept.
https://tabatkins.github.io/specs/css-nesting/

Update 2 (2019):We hebben nu een CSSWG-concept
https://drafts.csswg.org/css-nesting-1/

Indien goedgekeurd, ziet de syntaxis er als volgt uit:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}
.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

Status:Het oorspronkelijke specificatievoorstel voor 2015 is niet goedgekeurd door de werkgroep.

Antwoord 3, autoriteit 76%

Niet met pure CSS. Het dichtstbijzijnde equivalent is dit:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Antwoord 4, autoriteit 5%

Niet rechtstreeks. Maar je kunt extensies zoals LESSgebruiken om hetzelfde te bereiken.

Antwoord 5, autoriteit 4%

Nee.

Je kunt groeperingsselectorsen/of meerdere klassen op een enkel element, of u kunt een sjabloontaal gebruiken en deze met software verwerken om uw CSS te schrijven.

Zie ook mijn artikel over CSS-overerving.

Antwoord 6

Ik geloof niet dat dit mogelijk is. Je zou class1kunnen toevoegen aan alle elementen die ook class2hebben. Als dit niet praktisch is om handmatig te doen, kunt u het automatisch doen met JavaScript (redelijk eenvoudig te doen met jQuery).

Antwoord 7

Probeer dit…

Geef het element een ID en ook een klassenaam. Dan kun je de #IDName.className nesten in je CSS.

Hier is een betere uitleg
https://css-tricks.com/multiple-class-id-selectors/