Práctica de magia oscura con pseudlectosecactores CSS encadenados

Los pseuselectores CSS se vuelven muy útiles cuando no puede alcanzar el PHP básico de un sitio. El artículo de hoy proviene de mi experiencia laboral con clientes de WordPress para pequeñas empresas. Estos clientes a menudo vienen a usted con un gran código PHP que no puede cambiar. Por ejemplo, intente combinar un complemento para compartir social y un tema de generador de páginas y casi funciona, pero no pueden reparar uno o dos detalles de la pantalla. “Tirar todo hacia afuera” no es una opción, ni el intento de discutir con el código de espagueti del tema o del complemento. Estos tipos de proyectos hacen que el purista en mí se agite, pero dado que los buenos clientes con necesidades reales a menudo se encuentran con este tipo de configuraciones, definitivamente es mejor saber cómo ayudarlos. Los pseudoselectores CSS son un área de desarrollo web que se vuelve muy útil cuando no puede llegar al PHP básico, así que hoy, aprendamos un poco sobre la magia negra CSS.
Introducción a los pseuselectores CSS Pseuselectores extiende significativamente el poder de CSS para seleccionar de manera inteligente ciertos elementos en una página web y hacer tipos de cambios que no serían posibles. Las clases de pseudo y los pseudo elementos utilizan “pseudoselectores CSS” como un término general para cualquier cosa que se vea así :: Selector. Estas “cosas” vienen en dos variantes: seudoclasa y elementos pseudo. Las clases de pseudoclasa de seudoclase seleccionan elementos en la página basados ​​en cosas que son verdaderas sobre esos elementos. Aquí hay dos ejemplos bien conocidos: a: visitado {color: púrpura; } Esto convertirá cualquier enlace visitado previamente en púrpura. El bit mencionado anteriormente, visitado, es pseudo-clasa.
Li: First-Child {Background-Color: #AAA; } Esto establecerá un fondo gris claro para cualquier elemento que sea el primero de sus hermanos, en otras palabras, el primer hijo de sus padres (que debería ser un elemento OL o UL). Los pseudo pseudo-elementos son un poco más complejos y bastante fuertes: de hecho, le permito crear contenido en una página web utilizando CSS, lo que de otro modo no es posible. El ejemplo más común es: After: A: After {Content: “¡Haz clic en mí!” Tamaño de fuente: .8em; } Esto pone un pequeño “¡Haz clic en mí!” Envíe un mensaje de texto directamente después de cada enlace en su sitio, que no recomiendo. : Después de tener un gemelo fraternal: antes, que funciona de manera similar, pero coloca el contenido antes y no después del elemento seleccionado. Estos pseudo elementos tienen muchos usos, desde hacks Clearfix hasta fuentes de iconos, por lo que vale la pena comprenderlo. ¡Leer! Si este artículo es una noticia para usted hasta ahora, le recomiendo leer y pasar por las simples manifestaciones en las escuelas W3. Incluso si comprende los pseudoselectores, le recomiendo que consulte la lista completa de pseudoclasa y pseudoelementos, ¡porque hay muchos que no sabía! Mejores pseudoselectores de CSS :: no, nth-child css3 traído consigo un pseudo-classse más nuevo, como: no y: nth-child :: no (p) {color: #000; } Esto transforma el texto en negro para lo que no sea un párrafo (un elemento P).
li: nth-child (3) {display: none; } Esto se esconde y elimina del flujo de apariencia de la página, cualquiera que sea el tercer hijo de su padre. Estas pseudoclasa más nuevas trabajan en algo nuevo que IE8, el último navegador importante verdaderamente horrible. Ahora que IE8 finalmente tiene menos del 1% de participación de mercado, podemos comenzar a usarlos con más confianza. Nuevamente, si estas son noticias hasta ahora, hay algunas buenas lecturas que hacer. Este artículo Smashing Magazine es un buen comienzo. La cadena de pseudlectores CSS puede encadenar a los pseudlectores CSS para hacer cambios bastante complicados. Aquí, hablaremos sobre la cadena – combinación – pseudoslectores para hacer cambios bastante complicados. Esto es lo que nos permite resolver muchos problemas para los cuales normalmente necesitaríamos JavaScript o acceso al PHP de un sitio. Creé un ejemplo usando el menú de navegación WPShout. El ejemplo es estúpido, pero refleja muchas solicitudes reales de clientes. Supongamos que pensamos que los siguientes cambios en el menú de navegación WPShout traerían mucho tráfico:
Pero aquí está el trabajo: en este supuesto ejemplo, el menú de navegación WPShout es generado por un tema mal escrito, con muchos archivos de plantilla enterrados e imposible comunicar, por lo que la edición de PHP es mucho más alta de lo que vale la pena. Todo lo que tenemos es la marca que genera el tema y la posibilidad de editar el CSS del sitio.
Con lo que necesitamos trabajar: Marcar el menú es una versión simplificada de la marca que vemos en el front-end (usando las herramientas de desarrolladores de Chrome o similares):


elementos
enlaces
sobre
!
Nuestro CSS con pseudoselectores encadenados aquí es el CSS completo:
.Nav-Menu .nav-Weitem: First-Child: After {Content: “(¡Realice la lectura!)”; } .Nav-Menu .nav-weitem: no (: first-child): no (: último child): después de {content: “(¡verifique!)”; } .Nav-menu .nav-weitem: después {color: #fff; Tamaño de fuente: .6em; RODING-LEFT: .2REM; } .Nav-Menu .nav-Printm: Last-Child: After {Content: “(¡Únete!)”} .Nav-Menu .Nav-Weitem: Nth-Child (3)> A, .nav-Menu. Artem: enésimo Child (3): después del color: #AAA; } Comentario El código anterior existe para demostrar algunas formas de combinación compleja de pseudulectores CSS para dirigirse a elementos específicos, de alguna manera con un verdadero lenguaje de programación, como JavaScript.
Pseudo-clase y pseudo-elementos Lo primero que debe ver es que puede encadenar pseudoclase como: primer hijo con pseudo elementos como: beóforo y: después, como en esta línea: .nav-meur. 3): después del color : #AAA; } Esta línea se dirige a los siguientes elementos:
Elementos que están dentro de un artículo con la clase Nav-Menu,
Quienes tienen clase nave-wetem y
Soy el primer hijo de sus padres.
La regla luego usa un pseudoelemento para hablar con cualquier contenido que sea: después de que cada elemento se dirige. El resultado es que el contenido especificado adquiere un texto gris claro (HTML HEX #AAA). Selección compleja con pseudoclasa CSS3 para echar un vistazo a esta línea: .nav-men. (: Last-Child): After {Content: “((( ¡Mira también!) “; } Esto selecciona los siguientes elementos:
Elementos que están dentro de un artículo con la clase Nav-Menu,
quienes tienen clase de nave-wetem,
No soy el primer hijo de sus padres y
No soy el último hijo de sus padres.
La regla luego pone contenido: después de cada elemento. El resultado es que el contenido especificado (¡verifique!), Aparece después del segundo y tercero de nuestros cuatro elementos. Desventajas de este enfoque Este enfoque es fuerte, pero se usa mejor como la última solución, cuando la base de código PHP de un sitio es inaccesible o no vale la pena reparar. Recuerde, todo lo que hice arriba podría haberse hecho mucho más fácil agregando clases CSS CSS simples, cuando sea apropiado.
Las desventajas específicas de la confianza en gran medida en los pseudlectores de CSS incluyen:
Es frágil. En el ejemplo anterior, casi todos los estilo que escribí serían destruidos por la inclusión de un quinto elemento de menú.
Es opaco. La adición de muchos contenidos de la hoja de estilo de un tema confundirá a los desarrolladores potenciales (incluido usted). Las hojas de estilo CSS son la primera suposición de nadie cuando aparece un contenido misterioso en la página.
No es perfectamente compatible. Una vez más, los navegadores están mejorando, pero se encuentra en aguas mucho más seguras con clases HTML antiguas y simples que hablan con declaraciones de estilo CSS que con los pseudosecctores CSS3 encadenados. PHP no está a la mano y donde algo tiene que trabajar bastante rápido. Esto sucede con bastante frecuencia en el mundo real, pero ciertamente está a un paso de la mentalidad que generalmente produce un código elegante y resistente. ¡Ahora conoces la magia oscura! Esperamos que el poder de los pseudosractores encadenados comience a tener sentido: solo puede usar CSS para dirigirse a elementos muy específicos de una página de marcado HTML y hacer todo tipo de cosas, incluso para agregar contenido específico a la página. También cubrí mis bases con una advertencia de que estos trucos son la segunda o tercera solución para poder editar directamente el marcado de una página, pero mentiría si dijera que esto no era útil para abordar más clientes. necesidades. ¡Gracias por leer! Imagen de crédito: el verdadero amor de Snape