Este debe ser simple, pero estoy teniendo problemas para encontrar los términos de búsqueda de la misma.

Digamos que tengo este:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

En CSS, ¿cómo puedo crear un selector que coincide con algo que los partidos «(.una o .b) y .c»?

Sé que yo podría hacer esto:

.a.c,.b.c {
  /* CSS stuff */
}

Pero, suponiendo que yo voy a tener que hacer este tipo de lógica mucho, con una variedad de combinaciones lógicas, existe una mejor sintaxis?

  • Tenga cuidado si usted tiene que es compatible con Internet Explorer 6, ya que se acaba de ignorar más de una clase de nombres en un selector CSS.
  • Por suerte, para este proyecto, puedo decir IE6 a los usuarios ir de actualización de sí mismos.
  • En aras de la claridad siempre trato de poner un salto de línea después de las comas, o al menos un espacio.
  • para la nueva línea. Esta es la mejor apporach en mi opinión, especialmente cuando se utiliza el control de código fuente.
InformationsquelleAutor Josh | 2011-09-22

4 Comentarios

  1. 126

    existe una mejor sintaxis?

    No. CSS’ or operador (,) no se permiten agrupaciones. Es esencialmente el de menor precedencia de operadores lógicos en los selectores, por lo que debe utilizar .a.c,.b.c.

  2. 22

    Todavía no, pero no es el experimental :matches() pseudo-función de la clase que hace precisamente eso:

    :matches(.a .b) .c {
      /* stuff goes here */
    }

    Usted puede encontrar más información sobre ella aquí y aquí. En la actualidad, la mayoría de los navegadores soportan su versión inicial :any(), que funciona de la misma manera, pero será reemplazado por :matches(). Solo tenemos que esperar un poco más antes de usar esta en todas partes (yo seguramente).

    • No es razonable que la culpa es decir, para no implementar algo que simplemente nunca había pensado y no en cualquier proyecto, para empezar. :-moz-any() y :-webkit-any() apareció mucho antes de que Mozilla sugerido para Selectores de 4 (que conduce a su encarnación actual como :matches()).
    • Es igualmente razonable esperar que ningún proveedor para implementar una característica de un inestable proyecto, independientemente de cuánto tiempo el proyecto ha sido puesto a disposición (esto es para tener en cuenta el hecho de que los Selectores de 4 sigue siendo inestable y en gran medida sin aplicarse más de tres años después de su FPWD).
    • de hecho. He actualizado mi respuesta.
    • estaban culpando a IE6 para toda una década para cosas que no existen en 2001. La gente sólo quiere culpar a alguien.
    • Una palabra sobre los experimentales es que usted no quiere empezar a confiar en ellos a menos que oficialmente implementado. Mientras que podría parecer como una gran solución – la posibilidad de su desaparición lo que personalmente me impide de implementarlo en mis proyectos. Incluso para hacer un seguimiento de un experimentales pseudo clase no me hace sentir segura. Lo más probable es que va a ser utilizado en más de un lugar en el proyecto y en caso de que y si tiene más de uno donde se utiliza – que de alguna manera necesitan para seguir la pista de todos. Usted seguramente puede haber retrasos y todavía tire de ella fuera, pero que no suenan limpios
  3. 12

    Si usted tiene este:

    <div class="a x">Foo</div>
    <div class="b x">Bar</div>
    <div class="c x">Baz</div>

    Y sólo quiere seleccionar los elementos que han .x y (.a o .b), usted podría escribir:

    .x:not(.c) { ... }

    pero eso es conveniente sólo cuando usted tiene tres «sub-clases» y desea seleccionar dos de ellos.

    Seleccionar sólo una sub-clase (por ejemplo .a): .a.x

    La selección de dos sub-clases (por ejemplo .a y .b): .x:not(.c)

    La selección de los tres sub-clases: .x

    • Esto puede realmente trabajar en algunos de los casos.
    • La lógica de la cláusula de la forma a or b or c or d es el mismo que not(not(a) and not(b) and not(c) and not(d)) por lo que ‘o’ es en realidad sólo una función de conveniencia. En teoría debería ser posible vivir sin ella en todo de los casos. En la OP del caso (.a or .b) and .c -> :not(:not(.a):not(.b)).c
    • Has probado esto?
    • A partir de los cinco de la mañana, ¡sí! He js que escupe de primer orden de la lógica, con los selectores en las hojas, dando resultados como :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]. El código no es lo suficientemente limpia como para que el público la lectura, sin embargo, de lo contrario me gustaría publicar. He probado en chrome, safari y una de gama baja de android.
    • Usted tiene un gran punto, pero creo que has invocado una vez torturado definición de «función de conveniencia.» Cualquier cosa que una computadora digital puede ser descompuesto en compuertas NAND, pero yo no llamaría el resto de ingeniería de software «un montón de funciones de conveniencia.» Las diferencias de grado de rápidamente convertido de facto de las diferencias de clase cuando las construcciones pueden ser combinados.
    • ¿Qué puedo decir? Soy un matemático puro. 😉 Si nos metemos en fundamental en la computación de los bloques, de hecho, hay un buen montón de diversión. Por ejemplo NAND en realidad es bastante difícil para los ordenadores cuánticos como ellos son malos en tirar la información. Usted necesita un cable de repuesto que las ganancias de la información que de otro modo se perdería. El hecho de que usted puede conseguir a una clase de funciones a todos, al menos en teoría, es un gran paso adelante. Sin faltar el respeto a la intención de quienes toman el garrote para ingeniero en realidad. Por desgracia aquí no es el lugar para discutir esto en profundidad. Un foro?
    • Tuve un tiempo difícil averiguar que estaba bromeando. 🙁 La negación de CSS pseudo-clase :no(X), es una notación funcional de tomar un selector simple X como argumento. Coincide con un elemento que no está representado por el argumento. X no debe contener otro negación selector. (de Mozilla docs, el énfasis es mío)
    • Yo no estaba bromeando y se utiliza para el trabajo, pero ahora no. 🙁 He probado anteriormente en Chrome, Safari y Android, y funcionó. Sólo ahora he probado de nuevo en Chrome y no lo hizo. No sé si la restricción se ha añadido a la norma o si los navegadores webkit fueron simplemente descuidado en la comprobación de la CSS. Por qué alguien querría lugar una restricción en la lengua me golpea. Es más molesto.

  4. 4

    No. CSS estándar no proporciona el tipo de cosa que usted está buscando.

    Sin embargo, es posible que desee buscar en MENOS y SASS.

    Estos son dos proyectos que tienen como objetivo ampliar defecto sintaxis de CSS mediante la introducción de características adicionales, incluyendo variables, reglas anidadas, y otras mejoras.

    Le permiten escribir mucho más estructurado código CSS, y cualquiera de ellos es casi seguro que resolver su caso de uso en particular.

    Por supuesto, ninguno de los navegadores soportan su sintaxis extendida (especialmente desde que los dos proyectos tienen cada uno diferentes sintaxis y características), pero lo que hacen es proporcionar un «compilador» que convierte su LESS o SASS código en CSS estándar, que puede implementar en su sitio.

    • En ese momento, yo podría usar PHP impresión «Content-type: text/css»

Dejar respuesta

Please enter your comment!
Please enter your name here