Selector universal. nth-of-type y nth-last-child. Combinar CSS. Ejemplos y ejercicios resueltos (CU01016D)

Resumen: Entrega nº16 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01016D

 

 

EJEMPLOS SELECTORES CSS

A lo largo del curso hemos ido estudiando distintos tipos de selectores que nos permiten indicar en un archivo css a qué elementos del código HTML se debe aplicar una regla. En la práctica los selectores pueden aparecer combinados unos con otros: vamos a ver ejemplos reales de selectores que nos podemos encontrar en páginas web.

css

 

SELECTOR UNIVERSAL

Se usa el símbolo * como selector universal. Este selector afecta a todos los elementos dentro de una página web. Suele usarse para anular los márgenes o espaciados predeterminados que utiliza el navegador. Un ejemplo sería el siguiente:

* {
margin: 0; padding: 0; color: green; text-decoration:none;
}

Esta regla establece las propiedades de margin y padding en 0 pixeles para todos los elementos, su color en verde y la propiedad text-decoration con valor none. 

Un aspecto interesante del selector universal es que para las propiedades que se indiquen anula los valores por defecto que tengan los elementos HTML para esas propiedades. Por ejemplo los títulos h1, los párrafos, etc. tienen unos márgenes y colores por defecto. Usando el selector universal podemos anularlos (como en el ejemplo estableciendo su valor a cero) o establecerlos a un valor inicial concreto igual para todos (como en el ejemplo se establece el color verde o que no exista decoración para los textos). Este resultado no se consigue si esa definición se hace usando body { … }

En la siguiente imagen vemos el resultado de aplicar esa definición del selector universal para el código HTML que estamos usando como base de ejemplo para el curso.

selector universal css

 

 

Vemos que al aplicar las propiedades margin y padding 0 usando el selector universal, todos los elementos aparecen “apelotonados” al carecer del espaciado que incorpora el navegador por defecto. Sin embargo, sí se aprecian algunos espacios. ¿Por qué? Porque tenemos definidos algunos saltos de línea con etiquetas <br/>. Estos saltos de línea siguen existiendo.

 

 

MÁS SELECTORES

Algunos selectores adicionales respecto a los que hemos visto son estos:

Selector

Ejemplo CSS

Observaciones aprenderaprogramar.com

tipoElem:nth-last-child(num)

li:nth-last-child(2) {font-size: 200%;}

Selecciona los elementos de tipo tipoElem dentro de una serie contando desde el último hasta la posición indicada por num. En el ejemplo, los penúltimos elementos li dentro de una serie tendrán tamaño de fuente el doble de lo normal.

tipoElem:nth-of-type(sel)

li:nth-of-type(odd) {font-size: 200%; color: red;}

li:nth-of-type(even) {font-size: 100%;}

Selecciona los elementos de tipo tipoElem dentro de una serie y a los que son de tipo sel les aplica los estilos indicados. En el ejemplo los elementos li impares tendrán tamaño de fuente doble del normal y color rojo, mientras que los pares tendrán tamaño de fuente normal y el color que corresponda.

 

 

Recuerda que en algunos navegadores es posible que no se obtengan los resultados deseados.

 

 

EJEMPLOS DE CÓDIGO CSS Y SU INTERPRETACIÓN

Hasta ahora hemos trabajado con selectores normalmente de forma independiente: selectores por etiqueta, por id, por clase, por atributo, selectores avanzados específicos, etc. Cuando nos enfrentemos al desarrollo del código CSS de una web, o cuando tengamos que analizar una hoja de estilos desarrollada por otra persona, nos encontraremos que los selectores aparecen combinados de distintas maneras.

A continuación vamos a mostrar ejemplos reales de código CSS y a interpretar el significado de los selectores que se utilizan.

Selector Observaciones aprenderaprogramar.com
* { … } Selector universal. Afecta a todos los elementos de la web y sobreescribe los estilos por defecto.
html { … } Selector que afecta a toda la web pero no sobreescribe algunos estilos por defecto.
body.contentpane { … } Selector que afecta a cualquier elemento con atributo class = “contentpane” que esté dentro de <body> … </body>
#mainout { … } Selector que afecta a cualquier elemento con id = “mainout”
.padding { …} Selectores que afectan a elementos con class = “padding”.
h3 #slo { … } Selector que afecta a elementos con id = “slo” situados dentro de elementos h3. Por ejemplo <h3 >Portal web para aprender programación <span id="slo"> aprenderaprogramar.com</span></h3>
.find form .search .inputbox { … } Afecta a elementos cuya clase sea “inputbox” que se encuentren dentro de elementos cuya clase sea “search” que se encuentren dentro de elementos form que se encuentren dentro de elementos de clase “find”.
.find, form, .search, .inputbox { … } Afecta a elementos cuya clase sea “inputbox” ó “search” ó “find” y a elementos <form> … </form>. Nótese que la diferencia con el anterior selector es que en este caso los elementos están separados por comas.
.search label { … } Afecta a elementos <label> … </label> que se encuentren dentro de un elemento con class = “search”.
.find .searchintro { … } Afecta a elementos cuya clase sea searchintro que se encuentren dentro de elementos cuya clase sea find.
.syndicate-module span { … } Afecta a <span> … </span> que se encuentren dentro de elementos con class = “syndicate-module”
fieldset a { … } Afecta a links (<a> … </a>) dentro de <fieldset> … </fieldset>
a img, fieldset, img { … } Afecta a elementos img dentro de links, a elementos fieldset y a elementos img.
fieldset { … } Afecta a elementos <fieldset> … </fieldset>
#form-login fieldset { … } Afecta a elementos <fieldset> … </fieldset> que estén dentro de elementos con id = “form-login”
#login ul, #form-login ul { … } Afecta a listas ul dentro de elementos con id = “login” ó listas ul dentro de elementos con id = “form-login”
.inputbox, .registration input, .login input, .contact-form input, #jform_contact_message, input { …} Afecta a elementos con class = “inputbox” ó elementos input que estén dentro de otro con clase “registration” ó elementos input que estén dentro de otro con clase “login” ó elementos input que estén dentro de otro con clase “contact-form” o elementos con id = “jform_contact_message” ó elementos input.

 

 

EJERCICIO

Indicar el ámbito de aplicación de los selectores que se indican:

Selector Ambito de aplicación
.header { … }  
.find form .search .button { … }  
.find, form, .search, .button { … }  
.header label { … }  
#cohe, #cobo { … }  
.syndicate-module img { … }  
#form-login p { … }  
#login br { … }  
#login .button { … }  
label.invalid { … }  
div.itemCommentsForm form input#submitCommentButton  
#s5_bottom_menu_wrap ul.menu li { … }  
.module_round_box ul.menu ul a { … }  

 

 

SOLUCIÓN

Selector Ambito de aplicación
.header { … } Afecta a elementos cuya clase sea “header”.
.find form .search .button { … } Afecta a elementos cuya clase sea “button” y estén dentro de elementos cuya clase sea “search” y estén dentro de un <form> … </form> que esté dentro de un elemento cuya clase sea “find”.
.find, form, .search, .button { … } Afecta a elementos cuya clase sea “button” ó “search” ó “find” ó estén dentro de un <form> … </form>.
.header label { … } Afecta a elementos <label> … </label> que se encuentren dentro de un elemento con class = “header”.
#cohe, #cobo { … } Afecta a elementos con id = “cohe” ó elementos con id = “cobo”
.syndicate-module img { … } Afecta a <img … > que se encuentren dentro de elementos con class = “syndicate-module”
#form-login p { … } Afecta a párrafos que estén dentro de elementos con id = “form-login”
#login br { … } Afecta a elementos <br/> que estén dentro de elementos con id = “form-login”
#login .button { … } Afecta a elementos con class = “button” que estén dentro de elementos con id = “login”
label.invalid { … } Afecta a elementos con class = “invalid” que estén dentro de <label> … </label>.
div.itemCommentsForm form input#submitCommentButton Afecta a elementos con id = “submitCommentButton” que estén dentro de elementos <input> … </input> que estén dentro de elementos form que estén dentro de un div cuya clase sea “itemCommentsForm”.
#s5_bottom_menu_wrap ul.menu li { … } Afecta a elementos li que se encuentren dentro de un elemento ul cuya clase sea “menu” y que se encuentren dentro de un elemento con id = “s5_bottom_menu_wrap”
.module_round_box ul.menu ul a { … } Afecta a links que se encuentren dentro de listas ul que se encuentren dentro de otras listas ul cuya clase sea “menu” y que se encuentren dentro de elementos cuya clase sea “module_round_box”.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación