MANUALES:

Manual 23:

SELECTOR UNIVERSAL:

Selecciona todos los elementos de la página.

* {

  margin: 0;

  padding: 0;

}

El selector universal se indica mediante un asterisco (*). No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

SELECTOR DE TIPO ETIQUETA:

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.

p {

  ...

}

Es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

h1 {

  color: red;

} 

h2 {

  color: blue;

} 

p {

  color: black;

}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a tener cada regla según su selector por separado.

h1, h2, h3 {

  color: #8A8E27;

  font-weight: normal;

  font-family: Arial, Helvetica, sans-serif;

}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos.

h1, h2, h3 {

  color: #8A8E27;

  font-weight: normal;

  font-family: Arial, Helvetica, sans-serif;

}

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em; }

SELECTOR 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.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

p span { color: red; }

En el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre.

Utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:

p span  { color: red;  }

h1 span { color: blue; }

La sintaxis formal del selector descendente:

selector1 selector2 selector3 ... selectorN

Los selectores descendentes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

No debe confundirse el selector descendente con la combinación de selectores (la combinación de selectores separa los elementos por medio de comas).

Se puede restringir el alcance del selector descendente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

SELECTOR DE CLASE:

Aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class  de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

<body>

  <p class="destacado">Lorem ipsum dolor sit amet...</p>

  <p>Nunc sed lacus et est adipiscing accumsan...</p>

  <p>Class aptent taciti sociosqu ad litora...</p>

</body>

Se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.)

Ejemplo:

.destacado { color: red; }

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado".

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:

<body>

  <p class="destacado">Lorem ipsum dolor sit amet...</p>

  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>

  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>

</body>

Estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior:

<body>

  <p class="destacado">Lorem ipsum dolor sit amet...</p>

  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>

  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>

</body>

Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico:

p.destacado { color: red }

De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.

No debe confundirse el selector de clase con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo class="aviso" */

p.aviso { ... }

 /* Todos los elementos con atributo class="aviso" que estén dentro

   de cualquier elemento de tipo "p" */

p .aviso { ... }

 /* Todos los elementos "p" de la página y todos los elementos con

   atributo class="aviso" de la página */

p, .aviso { ... }

Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el siguiente ejemplo:

<p class="especial destacado error">Párrafo de texto...</p>

Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:

.error { color: red; }

.destacado { font-size: 15px; }

.especial  { font-weight: bold; }

 <p class="especial destacado error">Párrafo de texto...</p>

Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más avanzado:

.error { color: red; }

.error.destacado { color: blue; }

.destacado { font-size: 15px; }

.especial  { font-weight: bold; }

 <p class="especial destacado error">Párrafo de texto...</p>

En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado".

SELECTORES DE ID:

Aplicar estilos CSS a un único elemento de la página.

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:

#destacado { color: red; }

 <p>Primer párrafo</p>

<p id="destacado">Segundo párrafo</p>

<p>Tercer párrafo</p>

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. En una misma página, el valor del atributo id debe ser único. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.

USOS: utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:

p#aviso { color: blue; }

Un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes.

No debe confundirse el selector de ID con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo id="aviso" */

p#aviso { ... }

/* Todos los elementos con atributo id="aviso" que estén dentro

    de cualquier elemento de tipo "p" */

p #aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con

    atributo id="aviso" de la página */

p, #aviso { ... }

TOMADO DE: https://librosweb.es/libro/css/capitulo_2/selectores_basicos.html