¿Usar expresión regular en css?

Question

Tengo una página html con divs que tienen Identificación (s) de la forma s1, s2 y así sucesivamente.

<div id="sections"> 
    <div id="s1">...</div> 
    <div id="s2">...</div> 
    ... 
</div> 

Quiero aplicar una propiedad css a un subconjunto de estas secciones/divs (según la identificación). Sin embargo, cada vez que agregue un div, tengo que agregar el css para la sección por separado de esta manera.

//css 
#s1{ 
... 
} 

¿Hay algo así como expresiones regulares en CSS que puedo utilizar para aplicar estilo a un conjunto de divs.

Answer 1

Puede administrar seleccionando esos elementos sin ningún tipo de expresión regular como muestran las respuestas anteriores, pero para responder directamente a la pregunta, sí puede usar una forma de expresión regular en los selectores:

#sections div[id^='s'] { 
    color: red; 
} 

Eso dice seleccionar cualquier elemento div dentro de #sections div que tenga una ID que empiece con la letra 's'.

Ver fiddle here.

W3 CSS selector docs here.

Answer 2

En primer lugar, hay muchas formas de emparejar elementos dentro de un documento HTML. La coincidencia por ID se debe usar con moderación.

Comience con esta referencia primero para ver algunos de los selectores/patrones disponibles que puede usar para aplicar una regla de estilo a un elemento (s).

http://www.w3.org/TR/selectors/

La mayoría de estos selectores funcionará con IE 9 y el resto de los navegadores modernos; los selectores importantes funcionan en IE 8 (los resultados variarán IE 7 e inferiores).

En segundo lugar, a menos que realmente necesite nombrar elementos explícitamente por ID, considere usar un selector jerárquico en su lugar. Esto hace que el código sea mucho más limpio.

Empareje todos DIV s que son descendientes directos de #sections.

#sections > DIV 

de ajuste de todas las DIV s que son descendientes directos o indirectos de #sections.

#sections DIV 

de ajuste de la primera DIV que es un descendiente directo de #sections.

#sections > DIV:first-child 

Empareje un DIV con un atributo específico.

#sections > DIV[foo="bar"] 

Answer 3

Puede' acaba de agregar una clase a cada uno de sus DIVs y aplicar la regla a la clase de esta manera:

HTML:

<div class="myclass" id="s1">...</div> 
<div class="myclass" id="s2">...</div> 

CSS:

//css 
.myclass 
{ 
    ... 
} 

Answer 4

Una identificación está destinada a identificar el elemento de manera única. Cualquier estilo aplicado a él también debe ser exclusivo de ese elemento. Si tiene estilos que desea aplicar a muchos elementos, debe agregar una clase a todos ellos, en lugar de confiar en los selectores de ID ...

<div id="sections"> 
    <div id="s1" class="sec">...</div> 
    <div id="s2" class="sec">...</div> 
    ... 
</div> 

y

.sec { 
    ... 
} 

o en su caso específico, podría seleccionar todas las divisiones dentro de su contenedor principal, si no otra cosa es en su interior, así:

#sections > div { 
    ... 
} 

Answer 5

hay otra forma sencilla de seleccionar elementos particulares en css también ...

#s1, #s2, #s3 { 
    // set css attributes here 
} 

si sólo tiene unos pocos elementos para elegir, y no quieres que molestarse con las clases, esto va a funcionar fácilmente también .