JMiur [E]

Las pseudo-clases son palabras especiales que se pueden adicionar a ciertas reglas de CSS. De manera habitual, usamos varias pero, sobre todo, la famosa :hover que permite cambiar ciertas propiedades cuando ponemos el cursor del ratón encima de un elemento.

No es la única pseudo-clase que vemos en el CSS, suele haber más que se aplican a los enlaces u otras etiquetas. Por ejemplo:
a:link { ....... }
a:visited { ....... }
a:hover { ....... }
a:active { ....... }

ejemplo:link { ....... }
ejemplo:visited { ....... }
ejemplo:hover { ....... }
ejemplo:active { ....... }
Cada una de ellas las afecta de manera distinta siempre y cuando sepamos que ese es el orden en que deben definirse ya que si no se respeta, no funcionarán.

Dos de ellas se aplican a enlaces que posean un atributo href:

:link establece las propiedades de las etiquetas que posean un atributo href
:visited establece las propiedades de las etiquetas cuyos enlaces hayan sido visitados

el resto, puede aplicarse a casi cualquier otra etiqueta:

:hover establece las propiedades cuando ponemos el cursor del ratón encima
:active establece las propiedades cuando hacemos click con el ratón sobre ella

Un ejemplo:
.ejempo {
  color: #CCC;
  cursor: pointer;
  font-size: 20px;
  font-family: Tahoma;
}
.ejempo:link { color: #FFF; }
.ejempo:visited { color: blue; }
.ejempo:hover { color: yellow; }
.ejempo:active {
  color: red;
  font-size: 30px;
}

<a class="ejemplo" href="#"> etiqueta A </a>

<span class="ejemplo"> etiqueta SPAN </span>
Veremos al texto del enlace de color blanco y al texto del span de color gris porque no tiene un atributo href así que la regla .ejempo:link {} no lo afecta. En ambos, al colocar el cursor encima se verán de color amarillo y si se hace click sobre ellos, serán de color rojo y más grandes.


etiqueta A

etiqueta SPAN


Usando CSS3 hay muchas posibilidades extras pero, la mayoría de ellas no funciona en Internet Explorer si se tienen versiones inferiores a la 9. Por ejemplo, una de ellas es la llamada :not que nos permite excluir ciertas etiquetas.

Por lo general, cuando queremos que las etiquetas de cierto tipo se vean de manera especial, les agregamos una clase. Usando :not podemos hacer lo mismo, definir una clase general y luego, hacer que no se aplique en ciertos casos. La sintaxis es:
:not(.nombreclase)
En el ejemplo anterior, podría hacer esto:
.ejempo:active:not(.esteno) {
  color: red;
  font-size: 30px;
}

<a class="ejemplo" href="#"> enlace demo </a>
<a class="ejemplo esteno" href="#"> este enlace tiene NOT </a>
<a class="ejemplo" href="#"> otro enlace demo </a>
En cuyo caso, el enlace del medio no cambiará de color al hacer click sobre él.




En IE parecería que esto perturbara un poco así que conviene re-declarar la regla y condicionarla en ese navegador pero, es algo que hay verificar caso por caso:
<!--[if IE]>
  <style> .ejemplo:active { color: red;font-size: 30px; } </style>
<![endif]-->
Un uso práctico de esto podría ser la definición de reglas que suele hacerse para mostrar las imágenes de las entradas del blog. Si he creado una regla para decorarlas:
.post-body img {
  background-color: #000;
  border: 2px solid #888;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  padding: 5px;
}
todas las imágenes que agregue tendrán ese estilo y, si quiero que alguna no lo tengan debería crear una clase que haga lo inverso:
.post-body img.nada {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
así, si escribiera esto, la primera imagen se vería decorada y la segunda no:
<img src="URL_IMAGEN" /&lgt;
<img class="nada" src="URL_IMAGEN" /&lgt;
Usando :not podría ahorrarme el trabajo de quitar cada propiedad agregada y simplificar la regla de este modo:
.post-body img.nada:not(.nada) {
  background-color: #000;
  border: 2px solid #888;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  padding: 5px;
}

5 comentarios:

Dek  

porfa necesito de tu ayuda pero aquí en los comentarios no puedo poner codigo asi q porfa checa esto solo lo puse para que puedas ayudarme no es spam ayúdame ya que muchos dicen que nunca hay algo q no sepas resolver lee el primer post porfas..

http://nbn-bcl.blogspot.com/

Gracias

Responder
Fherguzon Fletcher  

Vaya, vaya, con que lo que debia saber era las pseudo clases? Pues no sabia, yo solo cambiaba colores y listo, pero no tenia bien los fundamentos. Gracias

Responder
JMiur  

No sé cómo funciona eso, Deck, pero, én principio, lo que veo en tu blog es que los comentarios de facebook están repetidos ya que ya un DIV cuyo ID es commentsfb que parecería estar sobrando y eso, debería ser lo primero a resolver ya que sino, no hay forma de seguir verificando el resto.

También veo que estás usando jQuery y además, prototype+scriptaculous que son librerías incompatibles, debes usar sólo una de ellas, o jQuery o bien prototype+scriptaculous.

Responder
Dek  

:( entonces no se podrá por q aun no se manejar bien el javascript, al menos toque el talón de aquiles, jaja pero aun así sigues siendo el mejor gracias me quedare con las ganas...:((

Responder
JMiur  

El problema es que estás usando librerías incompatibles y por lo tanto, una de ellas no funcionará; en este caso, jQuery ya que se carga primero y queda subrescrita por Prototype.

Si invirtieras el orden, es posible que funcionaría pero no funcioanaría la otra. No puedes usar ambas.

Además, debes qutar el formulario de Facebook duplicado.

El script no hace nada del otro mundo, simplemente, permuta las clases de dos DIVs y por lo tanto, seguramente funcionará.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR