Materia: Páginas Web

ÍNDICE
SELECTORES BÁSICOS................................................1

Selector universal.......................................................................1
Selector de elemento, etiqueta o tipo.............................................1
Selector de identificador...............................................................2
Selector de clase.........................................................................2
Selector descendiente..................................................................2
SELECTORES AVANZADOS..........................................3

Selector de hijo..........................................................................3
Selector adyacente......................................................................3
Selector hermano........................................................................4
Selector de atributo.....................................................................4
AGRUPACIÓN DE REGLAS...........................................5

PRÁCTICA.................................................................. 6
 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;}

SELECTOR UNIVERSAL

El selector universal viene representado con un asterisco (*):

*{
color: red;
}
Selecciona todos los elementos de la página, algo útil cuando
queremos aplicar el mismo estilo a todos ellos, aunque es complicado
que se requiera tener el mismo estilo en todos los elementos. Puede
ser aplicado también para seleccionar los elementos hijos:
p*{
color: red;
}
El selector universal debería evitarse todo lo posible y no utilizarse,
porque añade mucha carga en el procesamiento de los navegadores.

SELECTOR DE ELEMENTO, ETIQUETA O TIPO

El selector de elemento selecciona aquellos elementos cuya etiqueta

HTML coincide con el del selector:
h1 {
color: red;
}

1
Útil cuando se quiere aplicar el mismo formato a un elemento
determinado de la página, como el mismo formato a las cabeceras.

SELECTOR DE IDENTIFICADOR

El selector de identificador se representa con un numeral (#):

#principal {
color: red;
}
Selecciona aquellos elementos cuyo atributo id coincide con el indicado
en el selector. En un selector bastante restrictivo, ya que sólo se debe
usar en un único elemento por página. Como buena práctica, debería
evitarse en lo posible este selector (utilizando el selector de clase en su
lugar) y dejar el identificador para uso exclusivo con Javascript.

SELECTOR DE CLASE

El selector de clase se representa con un punto (.):

.principal {
color: red;
}
Selecciona aquellos elementos cuyo atributo class coincide con el
indicado en el selector. Se trata del selector más utilizado
normalmente al aplicar estilo.

SELECTOR DESCENDIENTE

El selector descendiente se representa concatenando dos selectores

seguidos, separados por algún espacio:
.contenedor p {
color: red;
}
Selecciona aquellos elementos que se encuentran dentro de otros
elementos.

2
 SELECTORES AVANZADOS
SELECTOR DE HIJO

El selector de hijo viene representado por el signo de mayor que (>):

p > span {
color: red;
}
Es similar al selector descendiente, pero en este caso selecciona
aquellos elementos que son hijos directos de otro elemento. En el
ejemplo siguiente pondría Texto de ejemplo a rojo con la definición
anterior:

<p><span>Texto de ejemplo</span></p>
mientras que en este otro ejemplo no modificaría el color:

<p><a href='#'><span>Texto de ejemplo</span></a></p>

algo que sí haría el selector descendiente.
SELECTOR ADYACENTE

El selector adyacente viene representado por el signo de suma (+):

h1 + h2 {
color: red;
}
Selecciona aquellos elementos que son adyacentes a otro elemento; es
decir, aquel elemento que es hermano y se encuentra a continuación.
En el siguiente ejemplo:
<h1>Título</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
solo pondrá el texto Subtítulo en rojo, dejando a Otro subtítulo sin
modificar su estilo.

3
 SELECTOR HERMANO

El selector hermano viene representado por el signo virgulilla (~):

h1 ~ h2 {
color: red;
}
En un selector menos restrictivo que el selector adyacente porque
selecciona todos los elementos que son hermanos a otro. En el ejemplo
anterior, pondría en rojo tanto Subtítulo como Otro subtítulo.

SELECTOR DE ATRIBUTO

El selector de atributo viene representado por corchetes ([]):

a[class] {
color: red;
}
Selecciona aquellos elementos que tienen un atributo con el nombre
indicado. Hay varios tipos de selectores de atributo:
[nombre_atributo], selecciona aquellos elementos que tienen un
atributo de nombre nombre_atributo.
[nombre_atributo=valor], selecciona los elementos que tienen un
atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo*=valor], selecciona los elementos que tienen un
atributo llamado nombre_atributo con un valor en el que aparece la
cadena valor.
[nombre_atributo^=valor], selecciona los elementos que tienen un
atributo llamado nombre_atributo con un valor que comienza con la
cadena valor.
[nombre_atributo$=valor], selecciona los elementos que tienen un
atributo llamado nombre_atributo con un valor que termina con la
cadena valor.
[data-*=valor], selecciona los elementos que tienen un atributo
personalizado de nombre data-* (data-filetype, data-info, data-
loquesea) con un valor igual a valor.

4
[nombre_atributo~=valor], selecciona los elementos que tienen un
atributo llamado nombre_atributo y con el que uno de los valores
(separados por espacios) coincide con el indicado por valor.

AGRUPACIÓN DE REGLAS
Cuando se crean archivos CSS complejos con decenas o cientos de
reglas, es habitual que los estilos que se aplican a un mismo selector
se definan en diferentes reglas:
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las tres reglas anteriores establecen el valor de tres propiedades
diferentes de los elementos <h1>. Antes de que el navegador muestre
la página, procesa todas las reglas CSS de la página para tener en
cuenta todos los estilos definidos para cada elemento.

Cuando el selector de dos o más reglas CSS es idéntico, se pueden

agrupar las declaraciones de las reglas para hacer las hojas de estilos
más eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
El ejemplo anterior tiene el mismo efecto que las tres reglas
anteriores, pero es más eficiente y es más fácil de modificar y
mantener por parte de los diseñadores. Como CSS ignora los espacios
en blanco y las nuevas líneas, también se pueden agrupar las reglas de
la siguiente forma:

h1 { color: red; font-size: 2em; font-family: Verdana; }

Si se quiere reducir al máximo el tamaño del archivo CSS para mejorar
ligeramente el tiempo de carga de la página web, también es posible
indicar la regla anterior de la siguiente forma:

5
h1 {color:red;font-size:2em;font-family:Verdana;}
Puedes enviarnos un comentario con sugerencias, críticas o para
informarnos de algún error.

PRÁCTICA
Código:

Resultado: