viernes, 17 de abril de 2015

Selectores Estructurales

: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