Capitulo 2 Selectores
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
Selectores Básicos
Selector Universal
Es utilizado para seleccionar todos los elementos de la pagina, este se indica median un (*)
* {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
Selector de Tipo
Selecciona todos los elementos de la página, los cuales su etiqueta html coincide con el valor del selector, este selector se utiliza sin colocar <>, si se quieren encadenar mismos estilos con etiquetas diferentes, se separan por medio de (,)
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
Selector Descendente
Selecciona los elementos que se encuentren dentro de otros elementos, el selector en este ejemplo es <span>
p span { color: red; }
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
texto1 y texto2 apareceran de color rojo
Selector de Clase
Se usa para aplicar estilos a un solo elemento de la pagina, para hacer esto se usa el atributo class, apra indicar a la regla css que se le debe aplicar
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Luego se debe crear un archivo css con el nombre de la clase, en este caso "Destacado", con todos los elementos que se le van a aplicar, se coloca un punto (.) para que el navegador no se confunda con otros tipos de selectores
.destacado { color: red; }
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estén dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos con
atributo class="aviso" de la página */
p, .aviso { ... }
Selectores Avanzados
Selector de Hijos
Se utiliza para seleccionar un elemento que es hijo directo de otro elemento, este se indica con el signo mayor que (>)
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
Selector Adyacente
Se usa para seleccionar elementos que en el código html se encuentran continuos de otors elementos, la sintaxis con el signo + para separar los elementos
elemento1 + elemento2 { ... }
El siguiente codigo se compone de dos elementos <h2>
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
Pero si le queremos aplicar diferentes estilos debemos usar:
h2 { color: green; }
h1 + h2 { color: red }
La regla anterior hace que todos los <h2> sean de color verde, salvo aquellos que se encuentren inmediatamente después de cualquier elemento <h1> y se muestran en rojo
Selector de Atributos
Estos tipos de selectores oermiten seleccionar elementos en funcion de sus atributos y/o valores de esos atributos
Los cuatro tipos de selectores de atributos son:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
No hay comentarios.:
Publicar un comentario