Selectores CSS Parte1

Los fundamentos del CSS Selectores 1

Básico 1 CSS Selectores

El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:

h1 { color: red; }

CSS Selectores de Clase 1

En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo  sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:

h1.red { color: red; }

CSS Selectores de ID 1

Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:

#myredh1 { color: red; }

CSS 1 Pseudo-clases

En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:

a: link
Define un enlace no visitado.

a: visited
Define un vínculo visitado.

a: active
Define un vínculo activo.

: first-line
Define la primera línea de como es el formato en el lienzo.

: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.

Selectores CSS 1 descendiente o selectores contextuales

Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:

h1 { color: red; }
h1 em { text-decoration: underline; }

También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:

div * q { border: thin solid blue; }

Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.

Dejar un comentario

*