CSS3 Sintaxis: Reglas y selectores PHP

paso a paso
1 respuesta

El camino hasta ahora

En el último artículo terminamos de dar formato a nuestro hola mundo. Para ello utilizamos CSS3. Si has
accedido a este artículo y tu interés es la programación web en PHP, es interesante que primero te tomes
tu tiempo para leer los artículos anteriores:

 CSS3 básico parte 1

 CSS3 básico parte 2
 En php-principiante encontrarás el resto de artículos para la iniciación en PHP orientado a web.

Si lo que buscas es una explicación sobre la sintaxis de CSS3, este artículo y su continuación son en los que
debes establecer tu foco de atención.

En esta tercera parte sobre CSS3 hablaré de la estructura y conceptos básicos a tener en cuenta a la hora
de crear nuestras hojas de estilo. Esta parte debería haber sido la primera, sin embargo al tratarse de
conceptos más “teóricos” me pareció mejor idea mostrar primero lo que se puede hacer con CSS3 y, una
vez ya tenemos una idea visual, profundizar en cómo funciona.

La explicación sobre la sintaxis de CSS3 se ha dividido en dos artículos debido a la gran cantidad de
información. Es importante tener en cuenta que estos artículos, aunque explican el funcionamiento
de CSS, no es un manual sobre CSS3 ya que esa labor es mucho más ambiciosa. Si estás interesado en
profundizar en CSS3, existen sitios web como librosweb dónde encontrarás interesantes manuales y,
entre ellos, uno sobre CSS

Las Reglas en CSS3

Nuestro código CSS3 no es más que una serie de reglas incluidas en un fichero. La mejor forma de
entender una regla es con un ejemplo:
 View Raw Code?

1. selector {
2. declaracion [propiedad: valor;]
3. }

Bien, eso es una regla; te darás cuenta que durante las dos primeras partes de CSS3 básico hemos estado
constantemente creando y editando reglas CSS.

Como puedes observar, una regla se compone de un selector y una declaración que está encerrada
entre {} de forma que con la declaración decimos qué tiene que hacerse y es el selector el encargado de
indicar a qué elemento de nuestro HTML se le debe aplicar la declaración.

La declaración es un conjunto de líneas separadas por ; (punto y coma) y cada línea (aunque pueden estar
todas seguidas) se compone de una propiedad y un valor de forma que especificamos qué modificación
visual queremos realizar (propiedad) y en qué medida (valor).

Los Selectores en CSS3

Hasta ahora hemos utilizado exclusivamente los llamados selectores de tipo o de etiqueta y los selectores
descendentes, sin embargo tenemos varios tipos de selectores:

 Selector universal.
 Selector de tipo o etiqueta.
 Selector descendente.
 Selector de clase.
 Selector de ID.
 Selector de hijos.
 Selector de atributos.

Selector universal
Es muy poco utilizado, ya que aplicará el estilo a todas las etiquetas del documento. Sin embargo, es muy
interesante a la hora de establecer una serie de valores básicos (como puede ser el color de la fuente, la
familia y tamaño) de forma que se garantice un estilo uniforme y sea en reglas más concretas dónde se
apliquen los estilos específicos.

En el CSS de nuestro proyecto, podríamos utilizar el selector universal en la primera regla declarada, por
lo que en vez de:

View Raw Code?

1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
2. margin: 0;
3. padding: 0;
4. border: 0;
5. font-size: 100%;
6. vertical-align: baseline;
 7. }

tendríamos:

View Raw Code?

1. * {
2. margin: 0;
3. padding: 0;
4. border: 0;
5. font-size: 100%;
6. vertical-align: baseline;
7. }

Selector de tipo o etiqueta

Como su propio nombre indica, el selector de etiqueta se utiliza para aplicar estilos en las etiquetas
HTML, es lo que hemos estado realizando constantemente:

View Raw Code?

1. etiqueta_html {
2. propiedad: valor;
3. }

Es muy útil para establecer un patrón común de comportamiento, es habitual tener un estilo base para
etiquetas como los p (párrafos), div (cajas), h1 (titular nivel1), h2 etc. que luego se ven sobrescritos por
otros estilos en casos concretos (como por ejemplo un estilo para los h2 de un artículo y otro para los h2de
los bloques).

View Raw Code?

1. p {
2. text-align: justify;
3. }
4. /* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la
etiqueta HTML p se debe pintar justificado */

Selector descendente
El otro de los selectores que utilizamos en nuestro proyecto es el selector descendente. Nos permite
establecer un estilo para una etiqueta que se encuentre dentro de otra, pudiendo tener un estilo para las
etiquetas h2 que están dentro de un article y otro estilo para los h2 que están dentro de un aside

View Raw Code?

1. etiqueta_html etiqueta_html {
2. propiedad: valor;
3. }

Podría asegurarse que es el selector más utilizado y nos proporciona una enorme flexibilidad ya que este
selector nos permite tener diferentes estilos para las mismas etiquetas HTML según su jerarquía
dentro del documento.
 View Raw Code?

1. article p {
2. text-align: justify;
3. }
4. /* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la
etiqueta HTML p ubicada dentro de un article se debe pintar justificado */
5. aside p {
6. text-align: right;
7. }
8. /* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la
etiqueta HTML p ubicada dentro de un aside se debe pintar alineado a la derecha */

Selector de clase
El selector de clase es, sin duda, el rey de los selectores. A las etiquetas HTML podemos ponerle un
atributo class y asignarle un valor:

View Raw Code?

1. <div class="clase1"></div>

o incluso varios:

View Raw Code?

1. <div class="clase1 clase2"></div>

De esta forma vinculamos una etiqueta HTML con una o varias clases. Podemos utilizar las mismas clases
para diferentes etiquetas HTML, de forma que esto es válido:

View Raw Code?

1. <div class="clase1"></div>
2. <p class="clase1"></div>

¿Intuyes lo mágico de este selector? Sí; gracias al selector de clase podemos poner un borde de color a
unos enlaces concretos y, al mismo tiempo, a todas las imágenes que tengan esa misma clase.

El selector de clase tiene una peculiaridad a la hora de introducirlo en la regla CSS y es que su nombre va
precedido por un . (punto) por lo que en nuestro ejemplo sería:

View Raw Code?

1. .clase1 {
2. propiedad: valor;
3. }
4.
5. .clase2 {
6. propiedad: valor;
7. }

Y lo que es más genial aún, podemos combinar un selector de etiqueta con un selector de clase:

View Raw Code?

 1. img.clase1 {
2. propiedad: valor;
3. }

De forma que este estilo se aplicará a las etiquetas HTML img que tengan la clase “clase1”, pero no a
cualquier otra etiqueta HTML aunque tenga esa clase asociada!

View Raw Code?

1. <img src="" class="clase1" alt="" title="" /> <!-- a esta etiqueta se le aplicara el estilo --
>
2. <span class="clase1">text</span> <!-- a esta etiqueta NO se le aplicara el estilo -->

Pero aún hay más… también podemos combinar los selectores de clase con los selectores descendentes:

View Raw Code?

1. p img.clase1 {
2. propiedad: valor;
3. }

Esta regla se aplica a las etiquetas img con clase “clase1” que están dentro de una etiqueta p

Otro genial ejemplo de la potencia del CSS:

View Raw Code?

1. p.clase2 img.clase1 {
2. propiedad: valor;
3. }

Esta regla se aplica a las etiquetas img con clase “clase1” que están dentro de una etiqueta p con clase
“clase2” 😀

Selector de ID
Al igual que una etiqueta HTML tiene un atributo class, existe otro llamado id. Al atributo id sólo se le
puede asignar un valor (no como en el class que podemos utilizar varios) y, además, dentro de un
documento HTML no pueden existir dos (o más) etiquetas con el mismo id. El id es, como su propio
indica, un identificador… y los identificadores tienen que ser únicos!!

IMPORTANTE: Si utilizas el mismo id en varias etiquetas dentro del mismo documento, tu navegador web
aplicará los estilos correspondientes a esas etiquetas, pero cuando pases tu código por el validador de la
W3C te indicará que existe un error ya que el estándar web especifica que el id es único y tenemos que
seguir (siempre que podamos) los estándares… si te ves en la situación de tener que repetir un id… lo suyo
es utilizar una clase. Es más!!! Las tendencias actuales de buenas prácticas nos dictan que NO debemos
utilizar los IDs en las hojas de estilo, dejando éstos para su uso con JavaScript.

Dicho esto, al igual que a la hora de incorporar nuestra clase a la regla CSS la precedemos por un punto, el
ID viene precedido por una almohadilla #

View Raw Code?

 1. #identificador {
2. propiedad: valor;
3. }
4. /* Esta regla se aplica a una etiqueta HTML con id igual a identificador, por ejemplo <div
id="identificador"></div> */

Podemos combinar nuestro selector ID con los selectores de etiquetas, descendentes e incluso de clase…
aunque si necesitas hacerlo deberías plantearte si un selector ID es lo más correcto… la respuesta siempre
será no 😉

Selector de hijos
El selector de hijos es muy parecido al descendente, pero con una importantísima diferencia. Un selector
descendente aplica un estilo a una etiqueta (clase, etc) que está contenida en otra, esto significa que este
estilo:

View Raw Code?

1. div img {
2. border: 0;
3. }

se aplicaría para la etiqueta img en estos tres casos:

View Raw Code?

1. <div>
2. <img src="url imagen" alt="texto alternativo" title="titulo imagen" />
3. <p>
4. <img src="url imagen2" alt="texto alternativo2" title="titulo imagen2" />
5. </p>
6. <img src="url imagen3" alt="texto alternativo3" title="titulo imagen3" />
7. </div>

En nuestros proyectos veremos que es muy habitual tener listas dentro de listas y querer aplicar un estilo
sólo a la lista de primer nivel. Para esto tenemos el selector de hijos.

Un selector de hijos aplicará el estilo a la etiqueta contenida dentro de otra si es hija de primer
nivel, es decir, está justo dentro y sólo dentro de esa etiqueta, así pues este CSS:

View Raw Code?

1. div > img {

2. border: 0;
3. }

en nuestro ejemplo:

View Raw Code?

1. <div>
2. <img src="url imagen" alt="texto alternativo" title="titulo imagen" />
3. <p>
4. <img src="url imagen2" alt="texto alternativo2" title="titulo imagen2" />
5. </p>
 6. <img src="url imagen3" alt="texto alternativo3" title="titulo imagen3" />
7. </div>

sólo se aplicaría al primer img y al tercero, al tratarse de etiquetas img hijas (en primer nivel) de div

Este selector, junto con las pseudo-clases y el selector de atributos son básicos en la maquetación moderna
😉

Selector de atributos
Este tipo de selector busca dar un plus de concreción al selector de elementos. Es un selector muy utilizado
a la hora de agregar estilos a los elementos de un formulario permitiéndonos maquetar (sin tener que
especificar un class) todos los inputs de tipo texto, todas las cajitas donde solemos poner cosas como
nuestro nombre… las cajas de texto de una línea (no las áreas).

El selector de atributos se construye colocando el nombre de la etiqueta y, entre corchetes, el nombre del
atributo + el grado de concreción sobre el atributo, lo que significa que tiene varias formas de usarse:

View Raw Code?

1. input[type="text"] {
2. border: 1px solid #000000 ;
3. }
4.
5. input[class] {
6. border: 1px solid #000000 ;
7. }
8.
9. input[class^="clase"] {
10. border: 1px solid #000000 ;
11. }
12.
13. input[class$="_hover"] {
14. border: 1px solid #000000 ;
15. }
16.
17. input[class*="text"] {
18. border: 1px solid #000000 ;
19. }

 La primera regla se aplica a todos los input de tipo text.

 La segunda regla se aplica a todos los input que tengan definido el
atributo class(independientemente de su valor).
 La tercera regla se aplica a todos los elementos que tienen un valor para ese atributo que empieza
por la cadena indicada.
 La cuarta regla se aplica a todos los elementos que tienen un valor para ese atributo que termina
por la cadena indicada.
 La quinta regla se aplica a todos los elementos que tienen un valor para ese atributo que contiene
la cadena indicada.

Existen más formas de declarar reglas con selectores de atributo, aunque los más habituales son los
indicados.
Desafortunadamente, sólo las dos primeras reglas tienen un buen soporte en los navegadores, por lo que
utilizar el resto de reglas no siempre será posible en nuestros proyectos.