Diseñar un elemento de CSS según su valor

Tengo una lista de porcentajes que van del 0% al 200%.Diseñar un elemento de CSS según su valor

¿Hay alguna forma de asignar esos números según su valor, es decir, hacer que los números 0% - 100% sean verdes y los números 101%> rojos?

Tenga en cuenta que no tengo acceso al código HTML para esto, solo CSS.

Gracias de antemano,

Tom Perkins

Editar:

El HTML en cuestión dice:

<td class="HtmlGridCell" colspan="5" align="Left"> </td> 
    <td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>

Y el CSS lee:

@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") { 
.progress:after { 
content: attr(title); 
font-size: 14px; 
position: relative; 
left: 122px; 
top: -27px; 
float: left; 
color: #666; 
background-color: #efefef; 
-moz-border-radius: 4px; 
padding: 5px; 
border: 1px solid #cfcfcf; 
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

Espero que ayude.

Fuente

2011-03-02 Tom Perkins

¿Qué tipo de elemento html estás hablando? – Sarfraz

Debería mostrar su código para que podamos ayudarlo mejor, de lo contrario, cualquier respuesta será solo especulación. – Kyle

Código agregado arriba. –

Si se pudiera establecer los porcentajes < 100% a comenzar con un 0 como 099%, se puede usar el attr comienza con, y es igual a attr selector. Funciona en los navegadores modernos y esto es 7 +

.progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/ 
.progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */

Alternativamente, usted podría hacer un selector para todos los 200 variaciones extrañas que tenemos, que es bastante largo aliento

Fuente

2011-03-02 11:10:56 Blowsie

Realmente útil, gracias! –

No hay problema, aquí hay información útil sobre los selectores de attr http://css-tricks.com/attribute-selectors/ – Blowsie

Dado que hay una evaluación de los valores involucrados, no se puede hacer con CSS.

Pero, Javascript puede hacer lo que está buscando.

Fuente

2011-03-02 10:09:45

Tampoco estoy convencido de que no haya posibilidad de usar solo CSS en este momento ... Sugeriría definir dos clases de CSS "verde" y "rojo" (o correspondientes) y hacer una pequeña evaluación en JavaScript o PHP para asignar las clases a los elementos ...

Lo sentimos, pero esto necesita acceso a HTML de cualquier tipo.

Fuente

2011-03-02 10:13:14 poeschlorn

Esto realmente depende del tipo y la estructura de los elementos HTML que desee seleccionar. Si solo tiene elementos <span> o <td> sin ningún tipo de estructura semántica, no funcionará.

Pero si tiene atributos como title, class, etc. podría hacer algo. de esta manera:

span[attributeName="attributeValue"] {color: #FF0000}

Fuente

2011-03-02 10:22:14 gunnarsson

Diseñar un elemento de CSS según su valor

Respuesta

Cuestiones relacionadas