Selectores, seleccionando elementos para aplicar CSS

Una hoja de estilo CSS esta compuesta por declaraciones del tipo:

selector {propiedad:valor; propiedad:valor;}

Donde el selector indica el elemento o elementos del documento HTML al que se le aplicaran las reglas de estilo.

Los selectores básicos que se pueden incluir en una hoja de estilo son:

1.- Utilizando los nombres de las etiquetas de los elementos que se utilizan en un documento HTML:

body, div, p, h1, h2, h3, h4, ul, li, ol, ………

En las hojas de estilo CSS se colocan los nombres de los elementos HTML sin utilizar los paréntesis triangulares <>.

cssrefext-2

En miestilo.css se están utilizando como selectores: h1, h2 y p.

2.- Utilizando el selector universal: *. Para aplicar las mismas reglas a todos los elementos HTML. Es un poco extraño que se quiera aplicar el mismo estilo a todos los elementos de un documento, sin embargo es posible que se pueda utilizar en algunas propiedades como color del texto, tipo de fuente, por mencionar algunas.

selector-1

En la hoja CSS miestilo2.css se esta utilizando el selector universal * para que el texto sea de color verde y la familia de fuentes sea verdana.

En la salida se observa que el color del texto para todos los elementos es verde y que la fuente utilizada es verdana. Las demás propiedades se definieron para los elementos HTML utilizados: h1, h2 y p.

selector-2

Para los elementos h3 y h4 que no tienen reglas definidas en miestilo2.css el navegador utiliza las reglas por defecto, a excepción de las reglas definidas para el selector universal. Por esta razón los elementos h3 y h4 también aparecen de color verde y en fuente verdana.

3.- Utilizando class e id, en conjunto con los nombres de las etiquetas de los elementos HTML.

class e id son identificadores para diferenciar los elementos HTML. id se aplica una sola vez en el documento, y class puede ser aplicado muchas veces a el mismo o a diferentes elementos.

Class

class es un atributo de los elementos HTML, que permite etiquetar y diferenciar uno o mas  elemento de otros.

por ejemplo en HTML podemos definir una clase para un tipo de párrafo que tenga un color de fondo y de texto diferentes al de los otros párrafos.

<p class=”importante”></p>

En CSS se definen los selectores de clase colocando primero el nombre de la etiqueta seguida de un punto, sin dejar ningún espacio ni antes ni después del punto,  y luego el nombre de class al cual queremos aplicar las reglas.

p.importante {background-color:blue; color:yellow;}

si queremos aplicar class=”importante” a todos los elementos HTML que tengan ese atributo y no solo a elementos <p>, entonces podemos eliminar el nombre del elemento y colocar el nombre de class luego del punto.

.importante {background-color:blue; color:yellow; }

selector-4

En miestilo3.css se crea una regla de estilo para los párrafos con atributo class=”importante”. La salida del navegador es la que se muestra a continuación.

selector-5

id

id es un atributo de los elementos HTML, que al igual que class permite identificar un elemento de otros. A diferencia de class un id solo se aplica una sola vez en el documento HTML, sin importar si es al mismo elemento o a elementos diferentes. solo debe existir un id en el mismo documento.

En el documento HTML debemos crear el elemento con atributo id y asignarle un nombre.

<p id=”intro”></p>

En CSS el nombre de id se coloca después del símbolo de numeral ( # ). El nombre del elemento se puede omitir o no. por ejemplo:

#intro {color:black; font-size:25; font-style:italic; }

p#intro {color:black; font-size:25; font-style:italic; }

son declaraciones que son equivalentes. Aunque pueden diferir en la precedencia que proporcionan.

selector-6

En la salida del navegador se ve como se aplican los estilos al párrafo con id=”intro” y al párrafo con class=”importante”.

selector-7

4.- Utilizando un grupo de elementos como selector.

 

Si varios elementos tienen propiedades que son comunes, se pueden agrupar en un solo selector y definir las reglas de estilo una sola vez para el grupo, en lugar de crear varios selectores y repetir las reglas en cada selector.

Cada elemento dentro de un selector de grupo va separado por una coma.

Por ejemplo si los títulos son todos de color verde sobre un fondo amarillo y utilizan fuente Arial.

h1 { color:green; background-color:yellow; font-family:Arial; }

h2 { color:green; background-color:yellow; font-family:Arial; }

h3 { color:green; background-color:yellow; font-family:Arial; }

Estas tres declaraciones pueden ser sustituida por una sola:

h1, h2, h3 { color:green; background-color:yellow; font-family:Arial; }

Si los elementos tienen algunas propiedades que son diferentes se pueden agrupar las propiedades comunes y definirlas en una sola declaración en grupo, y las propiedades que son diferentes definirlas para cada elemento. por ejemplo si el titulo h1 tiene tamaño de 40 pixeles, el h2 tiene 30 pixeles y el h3 25 pixeles y estilo itálica podríamos escribir:

h1, h2, h3 { color:green; background-color:yellow; font-family:Arial; }

h1 { font-size:40px;}

h2 { font-size:30px;}

h3 { font-size:25px; font-style:italic;}

selector-8

En la salida del navegador se puede observar como aparecen las propiedades comunes de los elementos h1, h2 y h3. y las propiedades creadas para cada elemento individualmente.

selector-9

En un próximo articulo trataremos otros tipos de selectores, denominados selectores avanzados.

 

 

 

http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html

http://www.littlewebhut.com/css/selectors/

http://www.w3schools.com/cssref/css_selectors.asp

https://jpxz.wordpress.com/2015/12/26/selectores/

Anuncios

1 comentario en “Selectores, seleccionando elementos para aplicar CSS”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s