Pseudo-clases

Seleccionan elementos dependiendo de ciertos estados.

Enlaces - hover

            a:hover{
                background-color: lightgrey;
            }
            .intense:hover{
                background-color: lightcoral;
            }
            a.intense:hover{
                background-color: lightcyan;
            }

                

Elemento <p> de la clase intense: ponga el cursor sobre él

Clase demo1

            p.demo1:first-child{
                font-size: 2em;
                color: red;
            }
                

Clase demo2

            p.demo2 i:first-child{
                font-size: 3em;
                color: blue;
            }
                

elementos <i> del primer hijo el segundo hijo <i> sin cambios

Clase demo3

            p.demo3:first-child i{
                font-size: 4em;
                color: gree;
            }
                

Clase hidden - mostar elementos con CSS

          
            p.hidden {
                display: none;
                background-color: yellow;
                padding: 20px;
            }

            div:hover p {
                display: block;
            }

                

Clase kids - Estilos dependientes de la posisción en la lista de elementos

            div.kids p:first-child{
                color:green;
                background-color: gainsboro;
            }
            
            div.kids p:nth-child(2){
                color: yellow;
                background-color: coral;
            }
            div.kids p:last-child{
                color:blue;
                background-color: blueviolet;
            }