¿Hay algún tipo de selector de CSS "negativo"?Selectores CSS negativos
Por ejemplo, cuando escribo la siguiente línea en mi CSS, todos los campos de entrada dentro de una etiqueta con la clase classname tendrán un fondo rojo.
.classname input {background: red;}
¿Cómo selecciono todos los campos de entrada que están fuera de una etiqueta con el nombre de clase de clase ?
Con el apoyo actual del navegador CSS, no se puede.
Los navegadores más nuevos ahora lo admiten; consulte Sam's answer para obtener más información.
(Ver otras respuestas para las alternativas en CSS.)
Si lo hace en JavaScript/jQuery es aceptable, que puede hacer:
$j(':not(.classname)>input').css({background:'red'});
No hay forma de seleccionar el elemento principal de los elementos coincidentes con CSS. Debería usar JavaScript para seleccionarlos.
Desde su pregunta que se supone que tiene marcado que se ve más o menos así:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
Una opción es añadir una clase a un elemento superior, dicen que el <form>, y escribir una regla de estilo de todo de las entradas de la forma. IE:
.formclassname input {
/* Some properties here... */
}
O
.formclassname > input {
/* Some properties here... */
}
Si desea seleccionarlos en base al hecho de que no están en el interior de un elemento con una clase específica, estás fuera de suerte sin el uso de JavaScript.
¿No harías eso al establecer el fondo 'global' en rojo, y luego usar el nombre de clase para modificar los demás?
input { background: red; }
.classname input { background: white; }
eso es exactamente lo que trato de encontrar una solución para, porque no es sólo el fondo que se cambia ... – BlaM
Anulación cada una de las opciones en el '.classname input' regla. –
intenta ".classname input {background-color: white! Important;}" ?? – AgelessEssence
Me gustaría hacer esto
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Creo que lo más cerca que puede llegar es solo afectar descendientes directos con una declaración
Este código, por ejemplo, solo afectará a los campos de entrada directamente en divs con clase "contenido principal"
div.maincontent > input {
// do something
}
Las entradas son un poco molestas porque, a diferencia de la mayoría de los otros elementos html, no hay necesariamente una manera de restablecer todas las propiedades CSS a su valor predeterminado.
Si el estilo no es crítico (es decir, es bueno tener pero no afecta a la funcionalidad) usaría jQuery para obtener una matriz de todas las entradas, verificar sus padres y luego solo llevar a cabo el diseño en esos fuera de ese div. Algo así como:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(Por cierto, no soy un experto en jQuery, por lo que podría haber algunos errores en el anterior, pero en principio algo como esto debería funcionar)
Mozilla soporta negation pseudo-class:
:not(.classname) input {background: red;}
Consulte también: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Tenga en cuenta que la clase de pseudo negación está en el Selectors Level 3 Recommendation y trabaja en rec versiones de Firefox, Chrome y Safari (al menos). Muestra de código a continuación.
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
[Ahora compatible] (http://caniuse.com/#feat=css-sel3) en las versiones publicadas de todos los principales navegadores. ([Prueba automatizada] (http://www.css3.info/selectors-test/) disponible si desea verificar si ': not()' es compatible). –
Quizás también sea útil agregar que puede encadenarlos juntos: 'div: not (#foo): not (#bar)' – Daz
FWIW He puesto una demo de selector negativo simple en http://simpl.info/cssnegativeselector. –
¿El selector no sería "*: not (.classname) input"? –
Ah, leyó mal la pregunta. Sí, debería - aunque el * es opcional. –
Ah, también, necesita usar descendiente directo (a> b) en lugar de cualquier descendiente (a b) de lo contrario, todas las entradas coincidirán ya que es probable que haya un contenedor más alto sin la clase (como cuerpo). –