Selectores de CSS

Introducción

CSS o también conocido como Hoja de estilo en cascada es un lenguaje usado para definir la estética o la presentación de una página web, es decir para dar le una mejor vista al usuario o cliente. Y esto se crea basado de un documento estructurado escrito en HTML. Para poder hace el diseño de la página existe algo denominado reglas, selectores y declaraciones, cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración o también conocidos como bloques de estilo, y dentro de bloques existen las propiedades o elementos, los cuales tiene un valor. Los estilos se aplican a los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con la sintaxis.

Selectores básicos:

En CSS existen diferentes selectores los cuales serán los más básicos para alguien que le gustaría aventurarse en este nuevo lenguaje, también se explicaran a detalle y se mostrara un ejemplo descriptivo de cada uno de ellos. Universal: Se podría decir que este selector es el que ocupa más las personas que van iniciando. Su funcionamiento de este selector es seleccionar todos los elementos que contendrá la página.

Sintaxis:

*{ propiedad: valor;}

See the Pen Selector Universal by Edgard (@edgardorito) on CodePen.

Etiqueta: Este selector esta también común porque su función es seleccionar a todos los elementos que contengan la etiqueta HTML. Sintaxis: Etiqueta html{ propiedad: valor;}

See the Pen Selector Etiqueta by Edgard (@edgardorito) on CodePen.

Clase: Sirve para dar estilo sólo a determinados elementos marcados con el atributo class y la clase definida, un consejo para aplicar este selector, es que el nombre debe ser descriptivo del clase es decir que acción o que es lo que hará esa clase en específico, es recomendable que solo vaya una sola acción. Y también para mayor facilidad de búsqueda se puede agrupar las clases que sean del mismo tipo.

Sintaxis:

.nombreDeLaClase{ propiedad: valor;}

See the Pen Selector Clase by Edgard (@edgardorito) on CodePen.

ID: Iguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único. Sintaxis:

#nombre-del-ID{ propiedad: valor;}

See the Pen Selector ID by Edgard (@edgardorito) on CodePen.

Descendente: Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. Las declaraciones se aplicarán sólo a los elementos de la etiqueta especificada que estén dentro de otra etiqueta concreta. Con este tipo de selectores restringimos el alcance de los simples, que evidentemente son más genéricos. Sintaxis:

selector1 selector2}{ propiedad: valor; }

See the Pen Selector Descendente by Edgard (@edgardorito) on CodePen.

Pseudo clases:

Es un estado o uso predefinido de un elemento al que se le puede aplicar un estilo independientemente de su estado por defecto. Existen cuatro tipos diferentes de pseudo clases:

• La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
• La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.

Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados de color morado, es habitual modificar los estilos para adaptarlos a la guía de estilo del sitio web:

a:link { color: red; }
a:visited { color: green; }

Las pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento.

A continuación se indican las acciones del usuario que activan cada pseudo-clase:

• :hover: se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.
• :active: se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.
• :focus: se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.

Por último, también es posible aplicar estilos combinando varias pseudo-clases compatibles entre sí. La siguiente regla CSS por ejemplo sólo se aplica a aquellos enlaces que están seleccionados y en los que el usuario pasa el ratón por encima:

a:focus:hover { ... }

La pseudo-clase :lang se emplea para seleccionar elementos en función de su idioma. Los navegadores utilizan los atributos lang, las etiquetas y la información de la respuesta del servidor para determinar el idioma de cada elemento. Si se considera el siguiente ejemplo:

p { color: blue; }
p:lang(es) { color: red; }

Por ejemplo, se puede utilizar para:

selector:pseudo-class {
    property:value;
}

See the Pen Pseudo clases by Edgard (@edgardorito) on CodePen.

Pseudo elementos:

Los pseudo elementos se añaden a los selectores, pero, a diferencia de las pseudo clases, los pseudo elementos no describen un estado sino que permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento::first-line selecciona solo la primera línea del elemento especificado por el selector

El pseudo-elemento :first-line

El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:

p:first-line { text-transform: uppercase; }

Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.

El pseudo-elemento :first-letter

El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primera letra del texto de cada párrafo:

p:first-letter { text-transform: uppercase; }

Los pseudo-elementos :before y :after

Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.

Las siguientes reglas CSS añaden el texto Capítulo - delante de cada título de sección h1 y el carácter . detrás de cada párrafo de la página:

h1:before { content: "Capítulo - "; }
p:after { content: "."; }

p:first-letter { text-transform: uppercase; }
selector:pseudoelemento {
  propiedad: valor;
}

Lista de pseudoelementos

• ::after
• ::before
• ::first-letter
• ::first-line

See the Pen Pseudo Elementos by Edgard (@edgardorito) on CodePen.

Curso básico a avanzado CSS