Share
Ya es hora de que empecemos a aprender algo de CSS nuevo, ¿no es así??
Todos estamos acostumbrados a las nuevas funciones que se introducen en los marcos izquierdo y derecho, pero a menudo olvidamos que las nuevas funciones se desarrollan constantemente en los lenguajes web principales que utilizamos todos los días..
El borrador del Nivel 4 de los selectores de CSS del 15 de enero describe un salto importante en las características de CSS.
Antes de comenzar, debe saber: el CSS que encuentra en este artículo, hoy, no funcionará en gran medida en ningún navegador. Incluso lo más nuevo de lo nuevo. La razón de esto es que el borrador es exactamente eso: un borrador. Esta es la cuarta versión del borrador de los selectores de nivel 4, que comenzó en 2011. Los selectores sugeridos en el borrador son una especificación para los nuevos selectores que están siendo sugeridos por los editores del propio documento, a través de mucha deliberación y colaboración con personas de la comunidad que participan en la lista de correo del W3C.
Entonces, ¿qué significa esto? Significa que en un futuro relativamente cercano, es probable que veamos muchas de estas funciones implementadas, y muchas se entregarán en versiones de desarrollo de navegadores como Chrome y Firefox..
Veamos algunos de los nuevos selectores.!
Hemos visto el :no Selector anterior en los selectores de nivel 3. Sin embargo, el borrador actual del nivel 4 :no selector permite múltiples argumentos con una coincidencia más compleja.
Previamente, :no solo se podía usar con un solo selector y no se podía combinar. Por ejemplo, nivel 3. :no podría verse así:
a: no ([href * = "somesite.com"])
Esto elegiría todas las etiquetas de anclaje que no tenían una href incluyendo la cuerda "somesite.com". Pero con el nuevo borrador, podemos hacer cosas más interesantes..
Nosotros cubriremos :tiene en breve, pero por ahora, aquí hay un selector que selecciona todos los enlaces que no son descendientes directos de elementos con una clase de columna o una clase que comienza con columna (como las clases de rejilla de Bootstrap col-md-4). También ignorará los anclajes que tengan elementos img como descendientes..
a: no ([clase | = "col"]> a,: tiene (img))
Este selector también nos permite hacer cosas como:
div: no (div + div)
Esto selecciona todos los divs que no son hermanos de la siguiente línea de otros divs.
Con la adición de la : nth-last-child pseudo-clase también podemos hacer cosas como esta:
div: not (.container> div: nth-last-child (-n + 2))
Esto seleccionaría todos los divs excepto aquellos que son descendientes directos de .envase elementos y son los dos últimos hermanos.
Como puede ver, estas reglas pueden ser muy poderosas y complejas; Pero vamos a agregar aún más flexibilidad en la mezcla mediante la introducción de la :tiene pseudo selector.
los :tiene el pseudo-selector le permite seleccionar elementos que tienen los argumentos pasados como hijos. Por ejemplo, para seleccionar todos los enlaces de anclaje que tienen elementos de imagen como hijos, usaría la siguiente sintaxis:
a: tiene (img)
sin embargo, :tiene no se limita a los selectores simples. Puedes combinar :tiene con :no y : nth- * Selectores para crear selectores relacionales bastante complejos..
Por ejemplo, seleccionemos mesa Elementos que tienen más de diez filas:
tabla: has (tr: nth-of-type (11))
¿Qué hay de seleccionar un cuerpo elemento cuyo último elemento hijo no es un pie de página?
cuerpo: no (: tiene (pie de página: último hijo))
Actualmente podemos apuntar hipervínculos utilizando :enlazar y :visitó. Esto va más allá de simplemente usar el una selector, ya que verifica la presencia de href, y verifica el historial de navegación del usuario para determinar si un enlace dado ha sido visitado.
: enlace,: visitó color: azul;
Con los selectores de nivel 4 propuestos podríamos diseñar todos los enlaces, visitados o no, usando : cualquier enlace. El estilo anterior es relativamente equivalente a:
: cualquier-enlace color: azul;
Hasta los selectores de nivel 4, CSS ha recibido un global alcance. En otras palabras, si agrega el siguiente CSS:
div color: # 444;
todos los divs recibirán el color: # 444 regla de estilo (Esto supone que no se aplican otros estilos de competencia). Los selectores de nivel 4 permiten que las hojas de estilo y las etiquetas de estilo se con alcance a un elemento:
Esto está fuera del alcance.
En este ejemplo, hemos aplicado un alcance a una etiqueta de estilo dentro de la aparte elemento. Las reglas de esta etiqueta de estilo solo se aplicarán a los descendientes de estiloel elemento padre.
los :partidos El pseudo selector nos permite verificar si un elemento coincide con una lista de elementos. Por ejemplo, si desea apuntar a todas las etiquetas de anclaje, párrafo y h2 dentro de un artículo, podría lograrlo con lo siguiente:
artículo: coincidencias (h2, a, p)
Esto reemplaza la sintaxis mucho más detallada anteriormente:
artículo a, artículo h2, artículo p
Nota: A partir de esta versión del borrador., :partidos() no puede ser usado con :no, :tiene, u otro anidado :partidos.
Accentsconagua
>> Probablemente esté familiarizado con el carácter de espacio que nos permite escribir reglas descendentes, como todos los anclajes dentro de un div:
div a
Pero hasta ahora no hemos visto un selector descendiente explícito. Con selectores de nivel 4 tenemos uno: >>.
Sin embargo, tenga en cuenta que esto resulta en un carácter adicional innecesario en su CSS, ya que puede lograr el mismo efecto con un solo espacio de caracteres, así que tenga cuidado de cómo lo usa. Presumiblemente actúa como un puente entre el selector de niño inmediato, >, y el selector de acceso a la sombra, >>>.
|| Este selector es una adición bienvenida para el estilo de tabla. Veamos algunas marcas para una tabla básica:
| CARNÉ DE IDENTIDAD | Nombre | |
|---|---|---|
El diseño de elementos agrupados horizontalmente (es decir, dentro de la misma fila) ha sido históricamente relativamente sencillo de lograr. Elementos de estilo agrupados. verticalmente es un juego de pelota completamente diferente.
Para estilizar todos los elementos que forman parte de la columna con la clase. información personal, podríamos agregar más clases al marcado y diseñarlas directamente, o, mirando hacia los selectores de nivel 4, podríamos usar el || selector. los || selector le permite dirigirse limpiamente a los td Elementos de la siguiente manera:
.información personal || td
¡Eso envuelve nuestra descripción general de algunas de las nuevas características que vienen en los selectores de nivel 4! Estas nuevas y poderosas herramientas de ahorro de bytes no están totalmente bloqueadas en su lugar, pero los navegadores están comenzando a implementarlas en sus formas experimentales iniciales, así que busque actualizaciones de la especificación. Por supuesto, cuando se formalicen, los cubriremos aquí en Tuts+!
Echa un vistazo a nuestro curso sobre El CSS del futuro, donde Craig Campbell cubre, entre otras cosas:
