Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

3. Selectores (III)

3.3 Selectores avanzados.

Mostraremos aquí una serie de selectores, que aunque son poco usados, a veces es conveniente tenerlos en cuenta para resolver algunas situaciones.

Selector de hijos

Como una variante del selector descendente está el selector de hijos, aunque diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento; es decir, está incluido en el otro en un puesto inmediatamente inferior (sin ninguna otra etiqueta que lo incluya) y se indica mediante el "signo de mayor que" ( > ). Ejemplo:

p > em { text-decoration: underline; }

Si tenemos las siguientes dos líneas de código html:

<p>este texto es <em>importante</em></p>

<p><b>este texto es <em>importante</em></b></p>

Este selector sólo afecta a la etiqueta em de la primera línea, pero no a la de la segunda, ya que tiene otro nivel de etiqueta por medio, mientras que un selector descendente afectaría a las dos líneas por igual.

Selector adyacente

El selector adyacente utiliza el signo + y su sintaxis es:

elemento1 + elemento2 { ... }

Este selector selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

• elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre o inmediato superior, debe ser el mismo.
• elemento2 debe aparecer inmediatamente despues de elemento1 en el codigo HTML de la pagina.

Ejemplo

h1 + p {font-weight: bold; }

Si aplicamos esta regla css al siguiente código html:

<h1>Título</h1>

<p>parrafo primero</p>

<p>parrafo segundo</p>

El selector sólo afecta al párrafo primero, ya que el segundo, aunque está al mismo nivel que el tituo (h1), no está inmediatamente después que él.

Selectores de atributos

los selectores de atributos, permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. Hay cuatro tipos de selectores de atributos. Estos selectores se escriben entre corchetes (signos [...] )

• [nombre_atributo], selecciona los elementos que tienen el atributo llamado nombre_atributo, independientemente de su valor. Ejemplo.
  
  [class] { color: blue }
  
  Selecciona a todos los elementos que tengan el atributo class sea cual sea su valor.
• [nombre_atributo=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo con un valor igual a valor. Ejemplo
  
  [align=left] { color: blue }
  
  Selecciona a todos los elementos que tienen el atributo align con un valor left
• [nombre_atributo~=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.Ejemplo:
  
  [face~=arial] { color: blue }
  
  selecciona a los elementos que tengan el atributo face en el que uno de sus valores sea arial
• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

Pseudoclases

Las pseudoclases son unos elementos especiales que permiten aplicar estilos a ciertas partes de un texto. En concreto, en CSS se permite definir estilos especiales a la primera frase de un texto, a la primera letra de un texto y a los enlaces. Las pseudoclases relacionadas con los enlaces las veremos más adelante, en el tema de enlaces. Ahora vamos a ver las otras dos pseudoclases.

Pseudoclase de primera línea

Permite dar un estilo diferente a la primera línea de un texto. Para aplicarlo, después del selector, y sin espacios entre medio escribimos :first-line. Ejemplo:

p:first-line { font-weight: bold; }

En este ejemplo todos los párrafos tendrán la primera línea en negrita

Veamos una página de ejemplo: Página de ejemplo

Pseudoclase de primera letra

Al igual que en la pseudoclase anterior, se permite aplicar un estilo diferente a la primera letra del texto. en este caso escribiremos el código :first-letter después del selector.Ejemplo:

p:first-letter { font-weight: bold; font-size: 2em; }

Mediante la pseudoclase :first-letter podemos crear una letra capital, simplemente aplicando la regla que hemos dado de ejemplo: la veríamos así:

Texto con letra capital

Si queremos que la letra capital esté al mismo nivel del texto ocupando las dos o tres primeras líneas, usaremos además algúna otra propiedad. La propiedad line-height: 0.9 hace que la la parte superior de la letra se coloque a la misma altura que la primera línea; para otros tamaños de letra, debemos probar cual es el valor de esta propiedad que más se ajusta al espacio que ocupa; y la propiedad float: left, de la cual hablaremos en lecciones posteriores, aquí permite que el texto de la segunda línea no quede por debajo de la letra capital, sino que se ajuste al resto de la primera línea. Un pequeño margen alrededor de la letra mejora también su visibilidad. En el siguiente ejemplo aplicaremos margin: 0.1em

La siguiente página de ejemplo lleva este código para crear la letra capital en sus párrafos:

p:first-letter { font-weight: bold; font-size: 2.5em; line-height: 0.9em; float: left; margin: 0.1em}

Página de ejemplo

---

En la siguiente página veremos algunos problemas que pueden surgir al aplicar las reglas, y cómo se resuelven en CSS.

Prioridades.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com