Quiero hacer un menú donde cada elemento se separe con un ·. Para lograr esto, uso¿Está bien usar múltiples pseudo-elementos en css?
menu li:before {
content: "· ";
}
Esto es abultado, pero genera un punto antes del primer elemento también. Por lo tanto, me gustaría utilizar :first-child pseudo-clase también. ¿Puedo hacer esto?
Claro que si - http://jsfiddle.net/WQBxk/
p:before {
content: "BEFORE ";
display: block;
}
p:first-child:before {
content: "1ST";
display: block
}
La mala - no va a trabajar en IE7 y abajo. No debido a los pseudo selectores múltiples, sino a causa de no admitido :before - http://kimblim.dk/css-tests/selectors/
Acabo de probar en IE8 - funciona bien.
Puede usar múltiples pseudo-clases, pero no puede usar múltiples pseudo-elementos. Aquí es donde la distinción entre los dos se vuelve importante (y el uso del término "pseudo-selectores" puede causar confusión potencial). – BoltClock
Oye, iba a hacer una pregunta similar a esta, pero luego vi esta pregunta para usar varias pseudo-clases, así que decidí hacer mi pregunta en estos comentarios. [Aquí] (https://jsfiddle.net/NathanielSantley/nLnjbf50/6/) es mi violín. Quiero que muestre "¡Correo electrónico inválido!" en rojo si se trata de un correo electrónico no válido y "¡Correo electrónico válido!" en verde si es un correo electrónico válido. ¿Hay algo que estoy haciendo mal? – NathanielSantley
Aquí es el violín de trabajo: http://jsfiddle.net/surendraVsingh/zRrLF/
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
CSS:
li:before{content:'. ';}
li:first-child:before{content:'@ ';}
Por supuesto se puede utilizar seudo classes.They están bastante bien apoyado desde IE8 y up.You puede comprobar la compatibilidad de cualquier pseudoclass que va a usar aquí http://caniuse.com/#search=after
Si no quiere un punto j use comas vacías en el contenido y luego muestre: bloquee y también especifique alto y ancho.
menu li:before {
content: "";
display:block;
width:50px;
height:50px;
background:red;
}
Funciona en webkit atleast ... – Himmators
funciona bien con un navegador moderno. Una vez usé hover y after class. Y comenzó. – SVS
¡Hurra para los navegadores modernos! ¡Que nunca se vuelvan anticuados! – Himmators