nuevos - selector de hijos css



No selectores de CSS (6)

¿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; }

https://src-bin.com

¿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 ?


Answer #1

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
}


Answer #3

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.


Answer #4

Yo haría esto

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }

Answer #5


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'});




css-selectors