Una mirada a la negación de CSS3 (NO) Selector
CSS tiene algunos selectores que le permiten seleccionar elementos en ciertas condiciones, como :flotar, :atención, :activo, Sin embargo, hoy no cubriremos esos selectores. Buscaremos uno que aún es un método poco conocido pero utilizado por la mayoría de los diseñadores web, es decir, :no selector o también conocido como selector de negación.
Qué hace?
Estoy seguro de que el :no nombre en sí ya ha descrito su función, que simplemente seleccionará Lo contrario del elemento o condición especificada.. Por ejemplo:
Esta sintaxis seleccionará cualquier elemento que no sea pag (párrafo).
: no (p) Mientras que la siguiente sintaxis seleccionará la div elemento que hace no tengo clase a B C
div: no (.abc) Bien, ahora, probemos este selector en un ejemplo real:
En primer lugar, hagamos algunos párrafos con algunos enlaces de Wikipedia y algunos enlaces con dominios ficticios. Aquí está el marcado HTML para el párrafo..
El CSS: no Selector Demo
Jujubes applicake sesame snaps chupa chups pastel de chocolate. Pastel de avena malvavisco wypas toffee donut pastel. Chupa chups jalea magdalena osos gummi. Oblea de pastel de gotas de limón.
Tarta de queso pastel de chocolate rosquilla gelatina dulce rollo en polvo soufflà ??  ??? ??? pastel de chocolate. Wypas algodón de azúcar gotas de limón galletas dulces buñuelo de caramelo mazapán. Caramelo de macarrones de regaliz con gelatina. Pastel de chocolate dulce rollo dulce malvavisco Dragé ??????????? algodón algodon brownie malvavisco.
Pudín que recubre la garra de oso de malvavisco. Pastel muffin pastelería gomitas brownie de pastel de frutas Gelatina de pan de jengibre y sésamo. Dulce pudín magdalena garra de oso. Pastel de zanahoria muffin algodón de azúcar tootsie roll muffin. Frijoles de jalea tarta de dragón ????? helada dulce barra de chocolate cubierta de obleas. Dulce rollo toffee azúcar ciruela pastelería drag? muffin de caramelo.
Pastelería de mazapán y pastelería. pastel de frutas wypas. Pastel de avena, chocolate, wypas, chocolate, azúcar, ciruela, pastel, glaseado. Caramelos barra de chocolate croissant oblea pastel de magdalena jujubes barra de chocolate. Bastones de caramelo de galleta dragón ???????.Candy brownie pastel de avena sésamo broches de queso en polvo tootsie rollo galleta garra de oso. Soufflà ??  ?? à © gummi lleva gominolas frijoles de sésamo broches de faworki dulce dulce de postre de galleta.
El plan aquí es: seleccionaremos solo los enlaces que no apuntan a Wikipedia y luego les daremos un signo de exclamación para alertar la atención hacia esos enlaces..
Primero, agregaremos un :después pseudo-elemento en todos los enlaces para colocar la marca, y lo definimos como un bloque en linea elemento.
a: after display: inline-block;
Luego, para seleccionar cada enlace que no apunte a Wikipedia, combinaremos el :no Selector con un selector de atributos. El selector de atributos aquí seleccionará cada etiqueta de anclaje con la que comienza el atributo href http://en.wikipedia.org/ y combinándolo con el :no, obviamente seleccionará lo contrario. Así que, aquí vamos:
a: no ([href ^ = "http://en.wikipedia.org/"]): después de background-color: # F8EEBD; frontera: 1px sólido # EEC56D; radio del borde: 3px 3px 3px 3px; color: # B0811E; contenido: "!"; tamaño de letra: 10 puntos; margen izquierdo: 5px; relleno: 1px 6px; posición: relativa;
¡Funciona! Las etiquetas de anclaje que no apuntan a Wikipedia ahora tienen un signo de exclamación.
Chrome Bug
Si ve esto en Chrome, notará que el efecto representado no es como el anterior. Todos los enlaces parecen tener un signo de exclamación independientemente de la URL.
Este caso ha sido abordado como un error. Entonces, para corregir este error, necesitamos agregar esta regla.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Y ahora el problema debería haberse solucionado..
- Manifestación
Conclusión
En algunas circunstancias utilizando el :no El selector es realmente la opción más efectiva, al igual que en el ejemplo anterior, donde podemos seleccionar algunos elementos aleatorios sin siquiera agregar clases innecesarias o marcas adicionales al documento..
En realidad, puede crear grandes efectos utilizando este selector, y este es un ejemplo: Funcionalidad de filtro con CSS3
