Clases y subclases de CSS

102

¿Es posible, además de lo que estoy haciendo porque no parece funcionar, hacer esto? Quiero poder tener subclases que estén debajo de una clase para usar el CSS específicamente para esa clase.

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

De modo que puedo usar class = "item" para los elementos de la clase css principal "area1", "area2". Sé que puedo usar class = "area1 item" para que esto funcione, pero no entiendo por qué tiene que ser tan detallado. ¿No debería la subclase css mirar en qué clase principal se encuentra para definirla?

Nota: esto funciona en IE (usando 7 en este momento), pero en FF no, así que supongo que esta no es una forma estándar de CSS de hacer algo.

css

— Ryan Abbott
fuente

182

Solo necesito agregar un espacio:

.area2 .item
{
    ...
}

— Abedul de Chad
fuente

Yo realmente no uso subclases ... ¿alguien puede darme una razón por la que esto sería necesario?

— patricksweeney

2

Las subclases son solo una forma más de agregar especificidad adicional a sus reglas CSS donde sea apropiado. Puede tener una clase principal, pero puede modificar la regla de un elemento en función de su ubicación en el documento.

— Matt Howell

74

Para su información, cuando define una regla como lo hizo anteriormente, con dos selectores encadenados:

.area1.item
{
    color:red;
}

Significa:

Aplique este estilo a cualquier elemento que tenga tanto la clase "area1" como el "elemento".

Como:

<div class="area1 item">

Lamentablemente, no funciona en IE6, pero eso es lo que significa.

— Matt Howell
fuente

1

Esto era en realidad lo que estaba buscando, ¡gracias por explicarlo!

— F-3000

Sé que esto es antiguo, pero ¿te refieres a "área1" o "elemento" en lugar de "área1" y "elemento"? Hace una diferencia significativa.

— Mgamerz

muchas gracias por esto, estaba devanándome la cabeza para resolver esto.

— user3547774

26

Su problema parece ser un espacio faltante entre sus dos clases en el CSS:

.area1.item
{
    color:red;
}

Debiera ser

.area1 .item
{
    color:red;
}

— Loros
fuente

14

¿Quiere forzar la selección de hijos únicos? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

— MrChrister
fuente

1

No es lo que estaba pensando, pero esta es una buena información si solo quiero hijos directos. ¡Gracias!

— Ryan Abbott

No sabía nada de eso. Gracias por eso MrChrister

— Sebastian Sastre

10

Simplemente ponga un espacio entre .area1 y .item, por ejemplo:

.area1 .item
{
    color:red;
}

este estilo se aplica a elementos con elemento de clase dentro de un elemento con área de clase1.

— M4N
fuente

8

Solo deja un espacio entre tus clases

.area1 .item
{
    ...
}

Aquí hay una muy buena referencia para los selectores de CSS .

— mbillard
fuente

6

Continuando con la respuesta de kR105 anterior:

Mi problema fue similar al del OP (Póster original), solo ocurrió fuera de una tabla, por lo que las subclases no se llamaron desde dentro del alcance de la clase principal (la tabla), sino fuera de ella, por lo que tuve que AGREGAR selectores , como se menciona en kR105.

Aquí estaba el problema: tenía dos cuadros (divs), cada uno con el mismo radio de borde (HTML5), relleno y margen, pero necesitaba hacerlos de diferentes colores. En lugar de repetir esos 3 parámetros para cada clase de color, quería que una "superclase" contenga border-radius / padding / margin, luego solo "subclases" individuales para expresar sus diferencias (comillas dobles alrededor de cada una, ya que en realidad no son subclases - ver mi publicación posterior). Así es como funcionó:

HTML:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

Espero que alguien lo encuentre útil.

— maximus
fuente

3

Esa es la columna vertebral de CSS, la "cascada" en las hojas de estilo en cascada.

Si escribe sus reglas CSS en una sola línea, será más fácil ver la estructura:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

El uso de múltiples clases también es un buen uso intermedio / avanzado de CSS, desafortunadamente hay un error de IE6 bien conocido que limita este uso al escribir código de navegador cruzado:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 IGNORA el primer selector en una regla de varias clases, por lo que IE6 realmente aplica la regla .area1.larger como

/*.area1*/.larger { ... }

Lo que significa que afectará a TODOS los elementos más grandes.

Es un error muy desagradable y desafortunado (uno de muchos) en IE6 que te obliga a casi nunca usar esa función de CSS si quieres un archivo CSS limpio entre navegadores.

La solución entonces es usar prefijos de nombre de clase CSS para evitar colisiones con nombres de clase genéricos:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

También puede usar solo una clase, pero de esa manera puede mantener el CSS en la lógica que pretendía, sabiendo que .area1Larger solo afecta a .area1, etc.

1

La clase que aplica en el div se puede utilizar como punto de referencia para diseñar elementos con ese div, por ejemplo.

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

Para ser súper semántico, debes mover la clase a la mesa.

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— George Wiscombe
fuente

1

también puedes tener dos clases dentro de un elemento como este

<div class = "item1 item2 item3"></div>

cada elemento de la clase es su propia clase

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
fuente

1

kR105 escribió:

también puedes tener dos clases dentro de un elemento como este

<div class = "item1 item2 item3"></div

No veo el valor de esto, ya que por el principio de estilos en cascada, el último tiene prioridad. Por ejemplo, si en mi ejemplo anterior cambié el HTML para leer

 <div class="box1 box2"> Hello what is my color? </div>

el borde y el texto del cuadro serían azules, ya que el estilo de .box2 asigna estos valores.

También en mi publicación anterior debería haber enfatizado que agregar selectores como lo hice no es lo mismo que crear una subclase dentro de una clase (la primera solución en este hilo), aunque el efecto es similar.

— maximus
fuente