Software para internet II - Especificidad y Pseudos

Che, me llegaron unos mails, pero no entiendo nada...

Ehhh, s. Hay un par de cosas que Laura explic en clase y otras que estn en los pdf que
mand la semana pasada.
Arranquemos por lo ms sencillo, la tabla de especificidad. Entender esto les va a servir
para resolver conflictos en el CSS, esto es cuando dos reglas apuntan al mismo elemento.
Los conflictos se resuelven de dos formas:
1.

Si tienen el mismo nivel de especificidad, la ltima en aparecer se aplica.

Por ejemplo, si por alguna razn, en el cdigo tienen algo como esto:

p{color:red}
p{color:blue}

El texto de los parrafos va a ser azul.

2. Si no, se aplica la que sea ms especfica. Por ejemplo no es lo mismo decir "los
parrafos" que "los parrafos con clase 'texto' que se encuentran dentro de un article con
identificador 'producto', este ltimo es mucho ms especfico y va a ser el aplicado.
p{color:red}
article#producto p.texto{color:blue}

Cuando los selectores se vuelven ms complejos, la especificidad se define segn los

componentes de cada uno, no todos tienen el mismo peso, ah es til la tablita.

Software para internet II - Especificidad y Pseudos

"Pseudos"...?
Eso estaba en uno de los pdfs, son selectores CSS avanzados, podramos decir que agregan
una condicin a la regla. La estructura general es agregando ":condicin" luego del selector.
Vamos a ver algunos siguiendo el orden del ejemplo que mand Laura.
1.

link / visited / hover / active. los links tienen cuatro "estados", reposo (link), visitado
(visited), enfocado (hover) y activo (active). Para formatear el aspecto de un link en cada
uno de esos estados vamos a usar estos pseudo selectores:

a:link{color:green}
a:visited{color:red}
a:hover{color:violet}
a:active{color:pink}

En este caso el orden es importante. Un metodo bastante boludo, pero efectivo, para
recordarlo es tomando como referencia las palabras Love/Hate (Amor/Odio en ingls).
Siguiendo el orden en el que aparecen las iniciales del Pseudo selector.

LOVE / HATE

2.

before / after. Estos indican que "antes (before) de este elemento" o "despus (after)
de este elemento" se aplica el siguiente contenido y este formato. El contenido se
define agregando la regla "content:"

Veamos los ejemplos de Laura.

En el caso de before es una flor que figura delante de cada <li> (Recuerden que estas
se usan para hacer las botoneras)
ul li::before{

content:url(flower.png);

margin-right:5px;

}

Esta regla puede combinarse con otros pseudo selectores, ":hover" por ejemplo, para
conseguir efectos ms interesantes. Si agregamos la siguiente regla, la flor va a
cambiar de color cuando se pase el puntero del mouse sobre el elemento <li>.
ul li:hover::before{
content:url(flower2.png)

}

Software para internet II - Especificidad y Pseudos

Seguimos con after (Despus), en el ejemplo se indica que luego de los link que estan
dentro de un <li> tiene que salir esto, //////*******. Fijense que, a diferencia del caso
anterior, este contenido se indica entre comillas.
ul li a::after{

content:"//////*******"

}

3.

first-letter / first-line. Estos se utilizan en parrafos y, tal como indican sus nombres,
afectan a la primera letra o a la primera linea respectivamente.
first-letter sirve para hacer las tpicas letras capitales que a veces inician los cuentos
o artculos. En el ejemplo se le dio color azul, se le dio un tamao mucho mayor, se la
separ un poco del texto, se le dio imagen y color de fondo y un ancho y un alto.

p:first-letter{

color:blue;

font-size:40px;

margin-right:10px;

width:120px;

height:120px;

background-color:#CCCCCC;

background-image:url(flower2.png);

}

first-line es menos interesante y puede dar lugar a resultados indeseados, hay

muchos factores que pueden modificar el contenido de la primera linea de un parrafo,
el zoom es uno que pueden probar muy facilmente. En el ejemplo se le dio a la primera
linea del parrafo con identificador "text-2" color rojo, un poco ms de peso y se la puso
en itlicas.
#text-2:first-line{

color:red;

font-weight:800;

font-style:italic;

}

4.

hover. Este ya lo usamos un par de veces, pero ahora lo explicamos, este pseudo
selector indica que "cuando el puntero pasa por encima de este elemento, se activan
estas reglas". En este caso, la novedad est en "cursor" que indica el aspecto del
puntero del mouse durante esa interaccin.

p:hover{

background-color:yellow;

font-size:18px;

padding:5px;

cursor:pointer;

}