Selectores
Los selectores especifican el objetivo del diseño. Los selectores pueden variar desde nombres simples de elementos hasta representaciones contextuales ricas.Tipo de selector
Selector de tipo
Un selector de tipo es el nombre de HTML Tag.[index.html]
<p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p>
[style.css]
p{
color: red;
font-size: 12px;
}
Selector de clase
El selector de clase se usa para uno o más elementos. Se describe el valor del atributo de clase del documento HTML con ". (Período)".[index.html]
<p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> <p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p>
[style.css]
p{
font-size: 12px;
}
.red{
color: red;
}
.blue{
color: blue;
}
Selector de ID
El selector ID se usa para un elemento único. Se describe el valor del atributo ID del documento HTML con "#".[index.html]
<p class="red">This is a paragraph</p> <p class="blue">This is a paragraph</p> <p class="red" id="small">This is a paragraph</p>
[style.css]
p{
font-size: 12px;
}
.red{
color: red;
}
.blue{
color: blue;
}
#small{
font-size: 9px;
}
Combinador descendente
Un combinador descendiente es un espacio en blanco que separa dos secuencias de selectores simples. Un selector de la forma "A B" representa un elemento B que es un descendiente arbitrario de algún elemento ancestro A.[index.html]
<h1>This is a <em>header</em></h1> <p>This is a <em>paragraph</em></p>
[style.css]
h1 em{
color: red;
font-size: 12px;
}
No son los únicos selectores-
Ver también Selectores Nivel 3.
Agrupamiento
Una lista de selectores separados por comas representa la unión de todos los elementos seleccionados por cada uno de los selectores individuales en la lista.[index.html]
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4>
[style.css]
h1, h2, h3, h4{
color: red;
font-size: 12px;
}
Fuente: www.w3.org
No hay comentarios:
Publicar un comentario