:root
:empty
p:empty
:first-child
:last-child
li:first-child //primer elemnto de esta lista
li:last-child //ultimo elemento de esta lista
h1:first-of-type{
}//primer elemento de un elemento superior
h1:last-of-type{
}//ultimo elemento de un elemento superior
:only-child
:only-of-type
Descendientes por id
ul li{
width:200px;
height:200px;
text-aling:center;
line-height:200px;
font-size:40px;
font-weight:bold;
background:grey;
margin-right:20px;
float:left;
margin-bottom:20px;
list-style:none;
color:white;
}
//busca la pocision 8 y le cambia el color
li:nth-child(8){
backgorund:blue
}
li:nth-child(1n){ //saltos para afectar una regla
backgorund:blue
}
li:nth-child(2n){ //cada dos elementos
backgorund:blue
}
li:nth-child(3n){ //cada tres elementos
backgorund:blue
}
tima
Tambien pueden ser negativas
li:nth-child(-1n+3){ //cada tres elementos hacia atras
backgorund:blue
}
Cuenta elemtos hacia aarriba
li:nth-last-child(){ //empezando del final 3 elemntos
backgorund:blue
}
li:nth-last-child(1n){ //empezando del final 3 elemntos
backgorund:blue
}
Seleccionar la penultima fila y la primera
li:nth-child(-1n+7){ //la fila ultima
backgorund:blue
}
li:nth-last-child(1n+7){ //la fila empezando
backgorund:blue
}
forma mas simple con comas
li:nth-last-child(1n+7),li:nth-last-child(1n+7){ //empezando del final 3 elemntos
backgorund:blue
}
No hay comentarios:
Publicar un comentario