| selector:first-child{ propiedade1:valor1; ... propiedadeN:valorN; } |
selectorProximo + selector{ propiedade1:valor1; ... propiedadeN:valorN; } |
selector [atributo="valorAtributo"] { propiedade1:valor1; ... propiedadeN:valorN; } |
selector * { propiedade1:valor1; ... propiedadeN:valorN; } |
Exemplo de regras de estilo:
| p:first-child {color:red;} b + i {color:magenta;} li + li + li {color:brown;} ul[type="square"] {color: green;} .ultimo {font-size:15px;} p.ultimo * {color:blue;} |
Exemplo de código:
| <div> <p>O primeiro parágrafo visualizase en vermello posto que é o primeiro fillo de <div> Ten texto en <b>negriña</b> <i>unha itálica próxima á negriña</i> e <i>outra itálica próxima a itálica anterior</i></p> <p>A seguinte lista ten na <ul> o atributo type="square"</p> <ul type="square"> <li>Primeiro elemento da lista</li> <li>Segundo elemento da lista</li> <li>Terceiro elemento da lista - Próximo a outras 2 listas</li> <li>Cuarto elemento da lista - Próximo a outras 2 listas</li> </ul> <p>A seguinte lista ten o atributo type="circle"</p> <ul type="circle"> <li>Primeiro elemento da lista</li> <li>Segundo elemento da lista</li> <li>Terceiro elemento da lista - Próximo a outras 2 listas</li> </ul> <p class="ultimo">Fin do <b>exemplo</b></p> </div> |
Visualización (O selector universal funciona en tódolos navegadores. Os outros selectores non funcionan en Internet Explorer) :
|
O primeiro parágrafo visualizase en vermello posto que é o primeiro fillo de <div> Ten texto en negriña unha itálica próxima á negriña e outra itálica próxima a itálica anterior A seguinte lista ten na <ul> o atributo type="square"
A seguinte lista ten o atributo type="circle"
Fin do exemplo |
| Anterior | Seguinte |