Verschachtelte CSS-Klassen

Question

Kann ich etwas wie das Folgende tun?

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

Aktualisierung 1: Es gibt eine CSS3-Spezifikation für CSS-Schachtelungen der Stufe 3. Sie ist derzeit ein Entwurf. https://tabatkins.github.io/specs/css-nesting/

Update 2 (2019): Wir haben jetzt einen Entwurf der CSSWG-Redaktion https://drafts.csswg.org/css-nesting-1/

Aktualisierung 3 (2022): Wir haben jetzt einen ersten öffentlichen Arbeitsentwurf des W3C https://www.w3.org/TR/css-nesting-1/

Im Falle einer Genehmigung würde die Syntax wie folgt aussehen:

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;
  }
}

Answer 2

Mit Vanilla CSS ist das nicht möglich. Allerdings können Sie etwas wie verwenden:

• Sass

Mit Sass macht CSS wieder Spaß. Sass ist eine Erweiterung von CSS3, die verschachtelte Regeln, Variablen, Mixins, Selektorvererbung Vererbung und mehr. Es wird übersetzt in gut formatiertes Standard-CSS mit dem das Kommandozeilen-Tool oder ein Web-Framework-Plugin.

Oder

• Weniger

R Namen zu konstruieren, um die Vererbung zu spezifizieren, kann man in Less können Sie einfach Selektoren innerhalb von anderen Selektoren verschachteln. Dies macht Vererbung klar und die Stylesheets kürzer.

Ejemplo:

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

Answer 3

Nicht mit reinem CSS. Das nächstliegende Äquivalent ist dies:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Answer 4

Nicht direkt. Aber Sie können Erweiterungen verwenden wie LESS um Ihnen zu helfen, dasselbe zu erreichen.

Answer 5

Nein.

Sie können verwenden Gruppierungsselektoren und/oder mehrere Klassen auf ein einzelnes Element anwenden, oder Sie können eine Vorlagensprache verwenden und diese mit Software bearbeiten, um Ihr CSS zu schreiben.

Siehe auch meinen Artikel über CSS-Vererbung .