Se llama selector a la sintaxis que define a quien se aplicara un grupo de atributos de estilo.
Se puede asignar el estilo a una tipo de etiqueta concreta de HTML, pero hay que tener en cuenta que afectara a todas las que se usen en la pagina. Para ello, en la declaración de estilos escribimos la etiqueta y entre llaves, las propiedades de estilo que deseemos, seguido de dos puntos y el valor seguido de punto y coma.
selector {propiedad: valor;}
Ejemplo: Seleccionamos la etiqueta body.
body {
background-color: #f0f0f0;
}
Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas (AND) y luego, entre llaves, las propiedades y valores.
h1, h2 {
color: red;
}
En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.
header, nav, footer{
background-color: #000000;
color: #ffffff;
border: 1px solid red;
}
Aqui es importante añadir al selector universal * que selecciona a todos las etiquetas.
Se puede definir un estilo especifico para un solo indicador id, para esto el nombre del indicar se preceder de # y en el elemento se asigna el mismo id. Hay que aclara que a diferencia de la clase este estilo solo se puede aplicar una vez.
#indice {propiedad: valor;}
#indice1,#indice2 {propiedad: valor;}
#queso {text-align: center;}
Podemos usar una o mas clases, si deseamos crear un estilo específico, para luego aplicarlo a distintos elementos de la página. Las clases en la declaración de estilos se declaran con un punto antes del nombre de la clase.
.clase {propiedad: valor;}
elemento.clase {propiedad: valor;}
.clase1,.clase2 {propiedad: valor;}
.clase1.clase2 {propiedad: valor;}
.miclase{
color: blue;
}
Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añadir el atributo class a la etiqueta que queremos aplicar dicha clase.
<p class="miclase">Este párrafo tiene el estilo definido en la clase "miclase".</p>
El párrafo anterior se presentaría con color azul. La definición de clases y su uso es sencilla, pero veamos un ejemplo más detallado:
Para la siguiente declaración de estilos:
.inverso {
color: #000;
background-color: #fff;
}
Se ha definido un fondo negro y el texto blanco para el cuerpo de la página (body), así como las celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al revés, es decir, fondo blanco y texto negro.
<body> <p/gt;Hola esto es un parrafo normal</p/gt; <p class="inverso">Párrafo con los colores invertidos</p/gt; <table/> <tr/gt; <td class=inverso>INVERSO</td> <td>NORMAL</td> </tr> </table> </body>
Esta página tiene el fondo negro y el texto blanco. El primer párrafo, que es un párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentará como se definió en la regla general.
Ejemplo: Selecciona los elementos que pertenezcan a ambas clases a la vez:
.uno.dos {
color: #000;
background-color: #fff;
}
Se puede usar el hecho de que una etiqueta contenga un atributo especifico como selector. Para su definicion en CSS el atributo debe ir entre corchetes.
[atributo] {propiedad: valor;}
[atributo1],[atributo2] {propiedad: valor;}
Ejemplo: Selecciona todas los elementos que contengan el atributo Title.
[Title]{color: red;}
Ejemplo: Selecciona cualquier elemento button sin un atributo DISABLED.
button:not([DISABLED]) {color: red;}
Se puede usar el hecho de que una etiqueta tenga un valor especifico en un atributo. Para este caso se designa entre corchetes el atributo, luego un simbolo y luego un valor. El simbolo puede ser =, ^= (empieza con), $= (termina con), *= (contiene) o |= (diferente).
[atributo='valor'] {propiedad: valor;}
[atributo1='valor'],[atriburo2='valor'] {propiedad: valor;}
| Operador | Descripción | Ejemplo |
|---|---|---|
| $ | Terminando con. | id$=ess |
| | | Que tenga el valor seguido de - | id|=mi |
| ^ | Comenzando con | id^=L |
| ~ | Contiene la palabra | title~=lindo |
| * | Contenga string | id*=s |
Ejemplo: Selecciona cualquier elemento cuyo atributo HREF termine en .PDF
[href$='.pdf'] {color: red;}
Cuando quieres combinar dos o mas selectores.
elemento1,elemento2 {propiedad: valor;}
elemento1 elemento2 {propiedad: valor;}
elemento1 > elemento2 {propiedad: valor;}
elemento1 + elemento2 {propiedad: valor;}
elemento1 ~ elemento2 {propiedad: valor;}
| Operador | Descripción |
|---|---|
| , | AND. Es un y que implica ambos elementos |
| Descendiente. Dentro de otro elemento sin importar que interpongan otros elementos. | |
| > | Hijo directo. Dentro de otro elemento, sin otro elemento intermedio. |
| + | Selecciona el primer elemento2 que se coloca inmediatamente después del elementos1. |
| ~ | Selecciona todos los elementos2 que están precedidos por un elemento1. |
| * | Se refiere a todos los elementos. |
| not | Negación. Invierte la selección. |
Ejemplo: Selecciona todos los elemento p que están incluidos en un elemento div.
div p {color: red;}
div > p {color: red;}
.uno .dos {color: blue;}
Ejemplo: Selecciona cualquier elemento p que es descendiente de un elemento li que es descendiente de un elemento ol que es hijo de un elemento body.
body > ol > li p {color: red;}
.uno > .dos {color: blue;}
Ejemplo: Selecciona cualquier elemento que no sea un elemento a.
*:not(a) {color: red;}
Se puede usar etiquetas y clases combinadas.
Ejemplo: Selecciona las p que contenga la clase "miclase".
p.miclase {color: red;}
Ejemplo: Selecciona los elementos de la clase "miclase" que sea hijo de un elemento p.
p .miclase {color: red;}
Una pseudo clase en cuando analizamos el valor de una propiedad. Las pseudo clases, referencia estados específicos de elementos. Por ejemplo, si un elemento está seleccionado, o tiene el foco, o se le pasa el puntero por encima, se está cambiando su estado.
elemento:seudoclase {propiedad: valor;}
| Pseudo clase | Descripción | Ejemplo |
|---|---|---|
| :first-child | El primero hijo. | p:first-child |
| :nth-child(n) | El hijo n (numerico) o ODD o EVEN | p:nth-child(2) |
| :only-child | El unico hijo. | p:only-child |
| :nth-last-child(n) | El hijo n antes del ultimo. | p:nth-last-child(2) |
| :last-child | El ultimo hijo. | p:last-child |
| :first-of-type | El primero de su tipo. | |
| :nth-of-type() | El n del tipo. | p:nth-of-type(2) |
| :only-of-type | El unico de su tipo. | p:only-of-type |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | |
| :last-of-type | El ultimo de su tipo. | p:last-of-type |
| :hover | Con el mouse encima. Ojo se puede usar en cualquier etiqueta. | a:hover |
| :active | Elemento al cual estas pulsando. Mientras este pulsado | a:active |
| :link | Enlace no visitado aun. | a:link |
| :visited | Elace ya visitado. | a:visited |
| :empty | Esta vacio. | p:empty |
| :root | Es la raiz. | :root |
| :fullscreen | Selecciona el elemento que está en modo de pantalla completa. | :fullscreen |
| :target | Es enlace | #news:target |
| :not(selector) | Selecciona todos los elementos que no son selector | :not(p) |
| :focus | Selecciona elemento input que contiene el foco. | input:focus |
| :default | Selecciona elementos input con atributo "default" | input:default |
| :checked | Selecciona elementos input con atributo "checked" | input:checked |
| :disabled | Selecciona elementos input con atributo "disabled" | input:disabled |
| :enabled | Selecciona elementos input con atributo "enabled" | input:enabled |
| :valid | Selecciona elementos input con un valor valido | input:valid |
| :invalid | Selecciona elementos input "inválidos" | input:invalid |
| :required | Selecciona elementos input con atributo "required" | input:required |
| :optional | Selecciona elementos input con atributo "optional" | input:optional |
| :in-range | Selecciona elementos input con valores dentro de rango | input:in-range |
| :out-of-range | Selecciona elementos input con valores fuera de rango | input:out-of-range |
| :indeterminate | Selecciona elementos input con valores es estados indeterminados | input:indeterminate |
| :read-only | Selecciona elementos input "solo lectura" | input:read-only |
| :read-write | Selecciona elementos input sin atributo "solo lectura" | input:read-write |
| :lang(lenguaje) | Selector por lenguaje. Ej html:lang (es) {font-size: 80%;} | p:lang(es) |
CSS también permiten modificar a voluntad la apariencia de los enlaces, usando como selector una pseudo clases especifica, luego el atributo (color, tamaño, fuente, subrayado o no) y finalmente el valor a asignar.
Ejemplo: hace que los enlaces por visitar sean de color azul, una vez visitados se pongan de color verde y al poner el mouse encima de color rojo.
A:hover {color: red;}
A:link {color: blue;text-decoration: none;}
A:active {color: purple;}
A:visited {color: green;}
El orden de aplicación debe ser necesariamente el expuesto para que funcione.
Si se les aplica la propiedad text-decoration, ajustado al valor none (ninguno), hace que los enlaces no estén subrayados.
Ejemplo: Hace que los enlaces visitados sean de color fucsia y no estén subrayados.
A:visited {color: fuchsia; text-decoration: none}
Ejemplo: Resaltar los elementos de formulario segun accion del mouse o estado.
:checked {color: fuchsia;}
:enebled {color: fuchsia;}
:disabled {color: fuchsia;}
:empty {background-color: yellow;}
:focus {background-color: yellow;}
Los pseudo elementos permiten seleccionar una sección del DOM sin tener en cuanta una etiqueta en especial, sino mas bien de su posición dentro del DOM.
::seudoelemento {propiedad: valor;}
| Pseudo elemento | Descripción | Ejemplo |
|---|---|---|
| ::first-child | Primer hijo del padre | p::first-child |
| ::first-line | Primera linea | p::first-line |
| ::first-letter | Primera letra | p::first-letter |
| ::before | Antes | p::before |
| ::after | Después | p::after |
| ::marker | Selecciona los marcadores de los elementos de la lista. | p::marker |
| ::selection | Selecciona la parte de un elemento que selecciona un usuario. | ::selection |
| ::placeholder | Selecciona elementos de entrada con el atributo "marcador de posición" especificado | input::placeholder |
Normalmente estos dos últimos asociados a un Generator Content.
Ejemplo: En el ejemplo se esta introduciendo un nbsp (código unicode 00A0) antes del div.
div::before {
content: "\00A0";
display: block;
width: 0;
heigth: 0;
border-width: 10px 20px 10px 0;
border-style: solid;
border-color: transparent;
}
Ejemplo: Introduce un recuadro navy con la palabra Sintaxis.
pre::before{
content: 'Sintaxis:';
color: white;
background-color: navy;
padding: 2px;
position: absolute;
top: -12px;
left: 10px;
}
Es posible que algunas implementaciones modernas no funcionen igual en todos los navegadores por lo que debes especificar una instruccion para cada navegador en particulor.
| Identificador | Descripción |
|---|---|
| -moz- | Firefox |
| -webkit- | Chrome o Safari |
| -o- | Opera |
#grad {
background: red; /* Para navegadores que no soportan gradiente */
background: -webkit-linear-gradient(red, yellow); /* Para Safari 5.1 a 6.0 */
background: -o-linear-gradient(red, yellow); /* Para Opera 11.1 a 12.0 */
background: -moz-linear-gradient(red, yellow); /* Para Firefox 3.6 a 15 */
background: linear-gradient(red, yellow); /* Sintexis estanadar */
}
Como se ha visto anteriormente, existen muchos selectores para aplicar estilos en cascada.
Ejemplo: Selecciona cualquier elemento h2 que no es un primer hijo de su tipo y que no es un último hijo de su tipo que es hijo de un elemento body.
body > h2:not(:first-of-type):not(:last-of-type) {color: red;}
Ejemplo: Selecciona cualquier elemento párrafo (p) sin un atributo class=section.
p:not(.section) {color: red;}
También puedes separar los selectores por un espacio para que actúen como un AND
p.datos p.eq(0) {color: green;}
También puedes separar los selectores por una coma para que actúen como un OR
h1,h2,h3 {color: blue;}
Selecciona todos los elementos.
* {color: red;}
Normalmente CSS le da preferencia al mando mas cercano, de alli que se dice que CSS se aplica en cascada, pero si se requiere hacer una excepcion con !important.
selector {propiedad: valor !Important;}