nuevos - No selectores de CSS
selector padre css (8)
¿Hay algún tipo de selector de CSS "no"?
Por ejemplo, cuando escribo la siguiente línea en mi CSS, todos los campos de entrada dentro de una etiqueta con class 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 class classname ?
¿No lo harías estableciendo el fondo ''global'' en rojo, luego usando el nombre de clase para alterar los otros?
input { background: red; }
.classname input { background: white; }
Creo que lo más cercano que puede obtener es solo afectar a los descendientes directos con una declaración
Este código, por ejemplo, solo afectará los campos de entrada directamente debajo de los divs con la clase "maincontent"
div.maincontent > input {
// do something
}
Las entradas son un poco molestas porque, a diferencia de la mayoría de los demás 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 aquellos fuera de ese div. Algo 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 los anteriores, pero en principio algo así debería funcionar)
Mozilla admite la pseudoclase de negación :
:not(.classname) input {background: red;}
Ver también: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
No hay forma de seleccionar el elemento principal de los elementos coincidentes con CSS. Debería usar JavaScript para seleccionarlos.
De su pregunta, supongo que tiene un marcado que se parece más o menos a esto:
<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 agregar una clase a un elemento superior, digamos <form> , y escribir una regla para aplicar un estilo a todas las entradas del formulario. ES DECIR:
.formclassname input {
/* Some properties here... */
}
O
.formclassname > input {
/* Some properties here... */
}
Si desea seleccionarlos basándose en el hecho de que no están dentro de un elemento con una clase específica, no tiene suerte sin el uso de JavaScript.
Tenga en cuenta que la pseudo clase de negación se encuentra en la Recomendación de Nivel 3 de Selectores y funciona en versiones recientes 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>
Yo haría esto
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Con el soporte de CSS del navegador actual, no puedes.
Los navegadores más nuevos ahora lo admiten; consulte la respuesta de Sam para obtener más información.
(Ver otras respuestas para las alternativas en CSS).
Si hacerlo en JavaScript / jQuery es aceptable, puede hacer:
$j('':not(.classname)>input'').css({background:''red''});