css-selectors anidadas - comodín * en CSS para las clases




etiquetas llamar (5)

Si no necesita el identificador único para un mayor estilo de los divs y está utilizando HTML5, puede probar los atributos de datos personalizados. Lea here o intente una búsqueda en google para HTML5 Custom Data Attributes

Tengo estos divs que estoy .tocolor con .tocolor , pero también necesito el identificador único 1,2,3,4, etc., así que lo agrego como otra clase tocolor-1 .

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

¿Hay una manera de tener solo 1 clase tocolor-* . Intenté usar un comodín * como en este css, pero no funcionó.

.tocolor-*{
  background: red;
}

Una solución alternativa:

div[class|='tocolor'] coincidirá con los valores del atributo "class" que comienzan con "tocolor-", incluidos "tocolor-1", "tocolor-2", etc.

Tenga en cuenta que esto no va a coincidir con

Referencia: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Representa un elemento con el atributo att, cuyo valor es exactamente "val" o comienza con "val" inmediatamente seguido de "-" (U + 002D)


Sí, puedes hacerlo.

*[id^='term-']{
    [css here]
}

Esto seleccionará todos los identificadores que comiencen con 'term-' .

En cuanto a la razón para no hacer esto, veo dónde sería preferible seleccionar esta manera; En cuanto al estilo, no lo haría yo mismo, pero es posible.


Lo que necesitas se llama selector de atributo. Un ejemplo, utilizando su estructura html, es el siguiente:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

En lugar de div puede agregar cualquier elemento o eliminarlo por completo, y en el lugar de class puede agregar cualquier atributo del elemento especificado.

[class^="tocolor-"] - comienza con "tocolor-".
[class*=" tocolor-"] - contiene la subcadena "tocolor-" que aparece directamente después de un carácter de espacio.

Demostración: http://jsfiddle.net/K3693/1/

Más información sobre los selectores de atributos CSS, puede encontrar here y here .


Acabo de jugar con la solución de @ Arbel:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});
body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>







css css-selectors wildcard