Selectors avançat

Selectors d’atribut

Els selectors d’atribut permeten indicar al navegador elements que tenen un atribut i, opcionalment, amb un valor d’atribut (que pot ser exacte o parcial)

/* element <a> amb atribut title (amb qualsevol valor) */
a[title] {
  color: purple;
}

/* <a> amb l'href apuntant a "https://exemple.org" */
a[href="https://exemple.org"]
{
  color: green;
}

/* <a> amb href que conté "exemple" */
a[href*="exemple"] {
  font-size: 2em;
}

/* <a> amb href que termina en ".org" */
a[href$=".org"] {
  font-style: italic;
}
/* <a> amb href que comença per "http://" */
a[href^="http://"] {
  font-style: italic;
}

/* <a> que té assignada un nom de classe "logo" (pot tenir altres classes) */
a[class~="logo"] {
  padding: 2px;
}

/* <a> que té assignada un nom de classe "logo" o una classe que comença per "logo-" */
a[class|="logo"] {
  padding: 2px;
}

Aquest tipus de selectors es fan servir molt per poder estilar de forma diferent enllaços segons si porten a un email ([href^=mailto]), s’obren en finestra nova ([target=_blank]), enllacen un número de telèfon ([href^=tel]),.. sense haver de donar-los una classe.

Al CSS del reset que hem fet servir, hem vist aquesta regla:

ul[class], 
ol[class]{
      list-style:none;
}

Aquesta regla indica que qualsevol llista del tipus ordered (ol) o unordered (ul) es mostrarà sense el format de llista, però només si té assignada una classe (sigui quina sigui).

Per poder indicar que volem que qualsevol llista (ul o ol) es mostri sense estil (list-style:none), hem modificat la regla de la següent manera:

ul,
ol{
list-style:none;
}

Selector de fills

Fins ara, hem fet servir selectors contextuals

article h2{
}

article h2, estilarà tots els h2 que hi ha dins d’un article

article > h2{
}

En canvi article > h2 només estilarà els h2 que siguin fills directes de l’article. Si a dins de l’article hi ha un footer i aquest footer té un h2, aquest h2 no s’estilarà.

Selector de germans

Podem fer servir els símbols ~ i + per assenyalar un element que comparteix pare amb un altre

h2 ~ p{
}

h2 ~ p indica al navegador que busqui qualsevol paràgrafs que comparteixi pare amb un h2

h2 + p{
}

h2 + p indica qualsevol paràgrafs que apareix inmediatament després d’un h2

h2 + p + p{
}

h2 + p + p localitza aquells paràgrafs que segueixen a un altre paràgrafs que, al seu torn, segueix a un h2

Al Reset que hem fet servir, hem trobat aquesta regla:

article > * + *{
margin-top: 1em;
}

Aquesta regla diu al navegador que busqui qualsevol element que segueixi a un altre que, al seu torn, sigui fill directe d’un article. Això permetrà aplicar un marge superior a qualsevol fill directe d’un article, sempre i quan no sigui el primer fill directe (en aquest cas no tindrà cap altre element al davant).