Crea tu web, tutor html, css

Los selectores

Los selectores CSS son el nombre que se usa para seleccionar a que elemento de una página web se le aplica una regla.

Existen varios tipos de selectores

selectores de tipo
ya habrás visto un ejemplo en la introducción. Son los elementos definidos en HTML como p, table, img, div.
 
clases
Elementos de la página con un atributo class cuyo valor sea el especificado. Pueden haber varios elementos con la misma class
Id
Elementos de la página con un atributo Id cuyo valor sea el enombre de la regla. Los id son únicos en cada página

Estos son los selectores básicos y su uso es muy simple como verás en estos ejemplos

td{ background-color: green; }
Todas las celdas de talba con fondo verde
.boton{ background-color: red; border: thin solid black; } .....
<div clas="boton">Pulsar</div>
Definición y uso de la clase boton
#elemento{ color: blue; } ......
<div id="elemento">Este texto sería azul</div>

Uso del selector identificador

En el primer caso esa regla se aplicaría a todos los elementos td (celdas de tabla), en el segundo a los elementos con atributo class="boton" y en el último a todos los elementos con atributo id="elemento".
emlateralApdo

Afinando la selección

Lo dicho hasta ahora sobre selectores vienen desde el primer estandard de CSS. Pero actualmente con los selectores se puede afinar mucho más a lo hora de elegir el elemento de la págna al que aplicar una regla. Se pueden definir añadir elementos a los selectores para que se aplqieun de manera condicional.

  • elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
  • a[href^="https://"]{color=red}

    Todos los enlaces a páginas que comienzan con https estarán en rojo

  • elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
  • img[src$=".gif"] { border=2}

    Todas aquellas imágenes tipo gif llevarán un borde de 2 px

  • elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor sea igual a la cadena de texto indicada.
  • p[title="importante"]{color:red; font-weight:bold;}

    Todos los elemento p cuyo atributo title sea la palabra importante se colocan en color rojo y en negrita

  • elemento[atributo~="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada, puede tener otras valores.
  • p[title="nota importante"]{color:red; font-weight:bold; font-size:18px}

    Todos los elemento p cuyo atributo title contenga la palabra importante, puede contener otras, se colocan en color rojo, en negrita y con texto de 18px

    Estos selectores amplían la forma de aplicar los estilos, ya no se aplican solo en función del tipo de elemento, del atributo id o class, podemos aplicar estilos en función del contenido.

Las deficiones CSS son muy potentes. Se puede seleccionar y modificar el formato de casi cualquier parte de la página web sin tocar su código HTML

Selectores combinados

Los selectores pueden combinarse o bien para compartir una regla, o bien para modificar el elemento e la página al que se refiere. :

Compartir regla
La combinación de selectores para compartir una regla es tan simple como esciribir los nombres de los selectores separados por comas y a continuación escribir la regla que compraten
 h1, h2, h3, h4 {
       color: red;
       font-weight: bold;
}
Todos los encabezamientos desde h1 a h4 aparecen en color rojo y en negrita
Pueden compartirse selectores de cualquier tipo, sean simples o pseudo selectores o combinaciones jerárquicas. No hay límitación.

Selector por clases
Es omo un selector de selectores, seleccionan selectores con una determinada clase.
div.rojo
{color: red;
background-color: lightblue;
}
<div class="rojo">Esto está en rojo sobre azul</div>
<p class="rojo">Está normal</p>
La regla solo se aplica a los bloque div con atributo class = rojo
Selectores dependientes
Puede definirse selectores para referirse a elementos que estén contenidos en otros, como un párrafo dentro de un div o una imagen dentro de una celda o dentro de un elemento de clase determinada. La relación indica que está contenido
 h1 a{
       text-decoration: none;
}
Los enlaces (<a>) dentro de un bloque h1 no se subrayarán, las restantes estarán subrayadas por defecto
Hijos:
Un selector hijo se usa para definir un elemento que es hijo de otro, es decir, que está incluido en otro elemento padre en el primer nivel. Si están anidados no se considerena hijos.
 div > p{
      background-color: lightblue;
}
<div><p>Está en azul</p>
<section><p>No está en azul</p></section>

Los párrafos (<p>) cuyo padre sea un bloque div tendrán un fondo azul claro

En el ejemlo el primer párrafo es hijo de div el segundo no lo es (podría ser nieto), es hijo de section

Hermano primero
Esta es una regla que selecciona el primer elemento que aparece después del otro. Podríamos decir el primer elemento hermano de uno dado.
 div + p{
     color: res;
}
<div>Soy un bloque div</div>
<p>Está en azul<p>
<p>No está en azul<p>
El párrafos (<p>) que aparece inmediatemente después de un bloque div
Hermanos
Complementa al anterior, selecciona todos los elementos que siguen a uno determinado.
 div ~ p{
     color: red;
}
<div>Soy un bloque div</div>
<p>Está en rojo<p>
<p>Yo también soy rojo<p>
<section><p>Este no es rojo</p></section>
Los párrafos (<p>) que aparece después de un bloque div están en rojo.
 
Este sistema de definición de selectores permite formatear cualquier elemento de la página sin aplicarle estilos directamente en HTML.