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.
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.
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 hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
