html - varias - Definición de la clase CSS con múltiples identificadores.

selectores de atributos css

Question

Acabo de empezar a aprender CSS y he encontrado un ejemplo que no entiendo completamente. No puedo describirlo bien, lo que ha dificultado encontrar una respuesta (por lo tanto, me disculpo si ya existe una respuesta que he pasado por alto).

Mi pregunta es con respecto al siguiente ejemplo:

.theme-light.slider-wrapper {
background: #fff;
padding: 10px;
}

Entiendo que las clases en CSS se definen usando la sintaxis .name que luego se puede usar en etiquetas como las siguientes:

<div class="name"></div>

No entiendo cómo funciona la declaración "doble" de .name1 .name2 y cómo se usaría en una etiqueta.

En una nota relacionada, el sitio web de ejemplo que me dieron usa un ID en una etiqueta que no existe en la hoja de estilo ... ¿en qué otro lugar podría haberse definido?

Answer 1

Aquí hay una explicación detallada de su pregunta.

Desde: www.itsmesharath.in

Answer 2

En CSS con el selector .className puede definir las propiedades para cada elemento con la clase "className". Cada elemento podría tener más clases. El significado de un selector con más clases depende de cómo las combine en sus declaraciones:

• .class1.class2 solo coincidirá con los elementos que tienen ambas clases definidas.

  .class1.class2 { background: red; }
  <div class="class1 class2"></div>

• .class1, .class2 hará coincidir los elementos con .class1 o .class2

  .class1, .class2 { background: yellow; }
  <div class="class1"></div>
  <div class="class2"></div>

• .class1 .class2 solo hará coincidir los elementos con class2 dentro de los elementos con class1.

  .class1 .class2 { background: blue; }
  <div class="class1">
  <div class="class2"></div>
  </div>

Answer 3

Tal vez este ejemplo de uso aclare las cosas para usted.

Imagina el siguiente escenario.

Usted tendría:

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

Y digamos que quieres que los divs tengan los mismos atributos de la siguiente manera:

.general-div {width: 300px; height: 300px; border: 1px solid #000;}
.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

Pero desea que .general-div con clase especial tenga un fondo rojo, y extra-div con clase especial tenga un fondo azul.

Usted escribiría:

.general-div.special {background-color: red;}
.extra-div.special {background-color: blue;}

Espero que se aclare el uso de la situación en cuestión.

Answer 4

tienes que usar

<div class="class1 class2"> 

para aplicar múltiples clases a un objeto.

Answer 5

.theme-light.slider-wrapper solo significa que tiene ambas clases. En el HTML podría verse así:

<div class="theme-light slider-wrapper"></div>

En cuanto a la identificación, no hay razón para que una identificación en el HTML deba ser referenciada en CSS

Answer 6

¿Cómo usar clases dobles, como <div class="name1 name2"></div> ?

Usted div tiene clases name1 y name2 ( ver demostración en vivo ).

¿Qué pasa con .theme-light.slider-wrapper ?

Eso significa que su elemento debe tener clases de theme-light y slide-wrapper ( ver demostración en vivo ).

Es bueno para más elementos. Quieres que algunos elementos tengan fondo gris. ¡No hay problema! Agréguelas clase gray y defina css:

.gray {
background: #ddd;
}

También es necesario que algunos elementos tengan texto en rojo. Definir red-text clase de red-text con css:

.red-text {
color: red;
}

Y al final tu párrafo tiene fondo gris y texto rojo. Solo agrega clases de red-text gray y red-text como este <p class="gray red-text">Lorem ipsum</p> .