Selectores CSS
Sumario
Selectores CSS
Os selectores CSS son usados para seleccionar elementos na páxina web os que aplicar CSS ruleset (declaracións, isto é, propiedade e valor asociado).
Os máis empregados son:
- Universal selector CSS
- Element selector
- Class selector CSS (o máis relevante!)
- Id selector CSS
- Group selector
- Attribute selector
Selector universal
O selector universal (*) selecciona todos os elentos na páxina. Moi usado por deseñadores para eliminar os márxenes e o padding:
* {
margin: 0;
padding: 0;
}
Selector de elemento
Tamén chamado de etiqueta; para seleccionar todos as aparicións do elemento na páxina en base o seu nome. Por exemplo para seleccionar parágrafos (
) e enlaces (<a>), con dous selectores de elemento:
p {
color: blue;
text-align: center;
}
a {
color: red;
}
Selector de clase
Usado para seleccionar elementos que teñan un atributo clase coincidente. A sintaxe é cun punto (.) seguido do nome da clase e a declaración coas propiedades e valores:
.box{
padding: 10px;
border: 1px solid blue;
}
Pódense engadir múltiples clases a un elemento: este reflexará a suma de todas as declaracións CSS.
.class1 {
color: red;
}
.class2 {
font-size: 25px;
}
.class3 {
text-align: center;
}
Selector de id
Para seleccionar un único elemento (os ids son únicos), emprégase o símbolo almofada (#) co nome do id.
#usuario {
color: blue;
font-size: 15px;
}
Selector de grupo
Agrupando varios elementos os que se quere aplicar a mesma declaración. Por exemplo:
p,
.heading,
#tag {
color: red;
background-color: yellow;
text-align: center;
}
Selector de atributo
Selecciona os elementos baseandose:
- no seu atributo [atributo]
- na combinación de atributo e valor [atributo="valor"].
Coma se pode ver usanse corchetes:
[title="my title"] {
color: green;
background-color: yellow;
text-align: center;
}
Pseudo-clases e pseudo-elementos
As follas de estilo asocian características de estilo aos elementos baseandose nas etiquetas dos elementos e na sía posición relativa (na árbore do documento). As pseudo-clases e os pseudo-elementos permiten facer referencia a determinados elementos sen basarse na información contida nesa árbore.
A diferenza entre pseudo-clases e pseudo-elementos é sutil:
- Os pseudo-elementos adoitan facer referencia a determinadas partes dun elemento mentres que as pseudo-clases adoitan facer referencia ó estado do elemento.
- Un pseudo-elemento só pode aparecer ó final dun selector mentres que unha pseudo-clase pode aparecer en calquer elemento do selector.
A sintaxe das pseudo-clases e os pseudo-elementos:
- En CSS 2 era a mesma, etiqueta:pseudo-elemento-ou-pseudo-clase (o nome de la etiqueta seguida de dous puntos e do nome do pseudo-elemento ou da pseudo-clase).
- Na recomendación CSS 3 Selectores (segunda versión CSS 3 Selectores publicouse no 2018) modificouse a notación dos pseudo-elementos a etiqueta::pseudo-elemento (o nome da etiqueta seguida dúas veces de dous puntos e do nome do pseudo-elemento) para distinguir uns de outros, pero permitiendo utilizar tamén a antigua notación.
Podes revisar estas explicacións con claros exemplos.
Combinando selectores
Algúns exemplos:
Hai:
- Descendente: E F
- Fillo: E > F
- Consecutivos: E + F
- Irmáns: E ~ F
Máis información no artigo [1]
