Selectores Avanzados

• Selector de hijos
• Selector adyacente
• Selector general de elementos Hermanos
• Selector de negación
• Selector de atributos

Selector de Hijos

Se utiliza para seleccionar un elemento que es hijo directo de otro elemento

p > span { color: blue; }

<p>
    <span> Hola </span> Mundo
</p>

Selector Adyancete

Se utiliza para seleccionar elemento que son hermanos (tienen el mismo padre) y se encuentran seguidos.

h1 + h2 { color: red; }

<div>
    <h1> Uno </h1>
    <h2> Dos </h2>
    <h2> Tres </h2>
</div>

Selector General de Elementos Hermanos

Selecciona todos los elementos que sean hermanos

h1 ~ h2 { color: red; }

<div>
    <h1> Uno </h1>
    <h2> Dos </h2>
    <h2> Tres </h2>
</div>

Selector de Negación

Selecciona a los elementos que no cumplan con la condición de un selector

p:not(.negro) { color: blue; }

<p class="negro"> Hola </p>
<p> Mundo </p>

Selector de Atributo

Selecciona a los elementos a partir de sus atributos y/o valores.

a[class] { color: blue; }
a[class=uno] { color: blue; }
a[class~=uno] { color: blue; }
*[lang|=es_AR] { color: blue; }

<a class="uno"> Link 1 </a>
<a class="uno dos"> Link 2 </a>
<a> Link 3 </a>
<a lang="es_AR"> Link 4 </a>

Pseudo-Clases

Son utilizadas para definir estados de un elemento dado

• :link
• :visited
• :hover
• :lang
• :nth-child
• :nth-last-child
• :first-child
• :last-child

:visited

Se aplica a todos los elementos <a> que han sidos visitados por el usuario

a:visited { color: green; }

<a href="http://google.com"> Link </a>

:link

Se aplica a todos los elementos <a> que NO han sidos visitados por el usuario

a:link { color: red; }

<a href="http://google.com"> Link </a>

:hover

Se activa cuando el usuario posa el raton sobre un elemento

a:hover{ background: orange; }

<a href="http://google.com"> Link </a>

:active

Se activa cuando el usuario presiona un elemento.

a:active{ background: orange; }

<a href="http://google.com"> Link </a>

:focus

Se activa cuando el navegador mantiene el foco sobre el elemento.

a:focus { background: orange; }

<a href="http://google.com"> Link </a>

:lang

Se emplea para seleccionar elementos en funcion de su idioma

p:lang(es_AR) { color: red; }

<p lang="es_AR"> Párrafo 1 </p>
<p lang="en_US"> Párrafo 2 </p>

:nth-child

Selecciona el elemento indicado pero con la condicion de quea el hijo enesimo de su padre comenzando desde el inicio

ul li:nth-child(3) { color: blue; }

<ul>
    <li> LI 1 </li>
    <li> LI 2 </li>
    <li> LI 3 </li>
    <li> LI 4 </li>
</ul>

:nth-last-child

Selecciona el elemento indicado pero con la condicion de quea el hijo enesimo de su padre comenzando desde el final

ul li:nth-last-child(3) { color: blue; }

<ul>
    <li> LI 1 </li>
    <li> LI 2 </li>
    <li> LI 3 </li>
    <li> LI 4 </li>
</ul>

:first-child

Selecciona el elemento indicado pero con la condición de que sea el primer hijo de su elemento padre.

ul li:first-child { color: blue; }

<ul>
    <li> LI 1 </li>
    <li> LI 2 </li>
    <li> LI 3 </li>
    <li> LI 4 </li>
</ul>

:last-child

Selecciona el elemento indicado pero con la condición de que sea el ultimo hijo de su elemento padre.

ul li:last-child { color: blue; }

<ul>
    <li> LI 1 </li>
    <li> LI 2 </li>
    <li> LI 3 </li>
    <li> LI 4 </li>
</ul>

Pseudo-Elementos

Son utilizados para agregar estilos sobre sobre ciertas partes de un elemento dado.

• ::first-line
• ::first-letter
• ::before
• ::after
• ::selection

::first-line

Permite seleccionar la primer linea de texto de un elemento

p::first-line { color: blue; }

<p>
    Hola Mundo
    <br>
    Chau Mundo
</p>

::first-letter

Permite seleccionar la primer letra de del texto de un elemento

p::first-letter { font-size: 3em; }

<p>
    Hola Mundo
    <br>
    Chau Mundo
</p>

::before

Se utiliza para añadir contenidos antes del contenido original de un elemento

p::before { content: "LEEME!"; }

<p>
    Hola Mundo
</p>
<p>
    Chau Mundo
</p>

::after

Se utiliza para añadir contenidos despues del contenido original de un elemento

p::after { content: "."; }

<p>
    Hola Mundo
</p>
<p>
    Chau Mundo
</p>

::selection

Se utiliza para estilizar el texto que ha seleccionado un usuario con su raton o teclado

::selection { background: blue; }

<p>
    Seleccioname!
</p>

Responsividad

La practica de crear sitios web que tengan la capacidad de ser visualizados correctamente en cada dispositivo y cada tamaño de pantalla, sin importar su largo o ancho, si es un celular, tablet, notebook o computadora de escritorio. 

Flexible Layout

Es la practica de dividir el documento en una grilla redimencionable. 

Media Queries

Permite agregar estilos a grupos de elementos siempre y cuando se den ciertas condiciones

Las condiciones pueden ser según el tipo de dispositivo

• all
• screen
• print
• tv
• braile

@media all { ... }

Media Queries

Las condiciones pueden ser según la orientación de la pantalla

• portrait
• landscape

@media (orientation:portrait) { ... }

Media Queries

Se pueden construir medias complejos utilizando operadores logicos

• and
• not
• only

@media all and (min-width:800px) { ... }

@media not screen and (max-width:800px) { ... }

@media only (orientation:portrait) { ... }

Flexible Media

Consiste en permitir que los elementos como imágenes o videos escalen junto al tamaño de la pantalla.

img, video { max-width: 100%; }