{"id":1446,"date":"2024-05-22T18:07:21","date_gmt":"2024-05-22T18:07:21","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1446"},"modified":"2024-05-22T18:10:40","modified_gmt":"2024-05-22T18:10:40","slug":"css-selectores","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-selectores\/","title":{"rendered":"CSS : Selectores"},"content":{"rendered":"
\n

Hemos visto lo b\u00e1sico de los selectores.<\/span><\/p>\n<\/header>\n

C\u00f3mo apuntar a una etiqueta:<\/p>\n
p {\r\n\u00a0 color: red;\r\n}<\/pre>\n
C\u00f3mo apuntar a m\u00faltiples etiquetas:<\/p>\n
p, a {\r\n\u00a0 color: red;\r\n}<\/pre>\n
Ahora veamos algunos selectores adicionales.<\/p>\n
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.<\/p>\n
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}<\/p>\n
Ejemplo:<\/p>\n
<p class=\"nombre-perro\">Roger<\/p><\/pre>\n
Ahora veamos algunos selectores adicionales.<\/p>\n
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.<\/p>\n
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}<\/p>\n
Ejemplo:<\/p>\n
<p class=\"nombre-perro\">Roger<\/p><\/pre>\n
.nombre-perro { color: yellow; }<\/pre>\n
Para seleccionar elementos con un id espec\u00edfico, podemos usar esta sintaxis: #id {}<\/p>\n
<p id=\"nombre-perro\">Roger<\/p><\/pre>\n
#nombre-perro { color: yellow; }<\/pre>\n
Hay una gran diferencia entre esos dos selectores.<\/p>\n
Dentro de un documento HTML, puedes repetir el mismo valor de clase en varios elementos, pero solo puedes usar un id una vez.<\/p>\n
Usando clases puedes seleccionar un elemento con 2 o m\u00e1s nombres de clase espec\u00edficos, algo que no es posible usando ids.<\/p>\n
Puedes apuntar a un elemento que tenga 2 (o m\u00e1s) clases juntas combinando los nombres de clase separados por un punto, sin espacios.<\/p>\n
CSS: M\u00e1s selectores Hemos visto lo b\u00e1sico de los selectores.<\/p>\n
C\u00f3mo apuntar a una etiqueta:<\/p>\n
p { color: red; }<\/pre>\n
C\u00f3mo apuntar a m\u00faltiples etiquetas:<\/p>\n
p, a { color: red; }<\/pre>\n
Ahora veamos algunos selectores adicionales.<\/p>\n
Ya sabes que podemos usar los atributos de clase e id en un elemento HTML.<\/p>\n
Podemos seleccionar elementos con una clase usando esta sintaxis: .clase {}<\/p>\n
Ejemplo:<\/p>\n
<p class=\"nombre-perro\">Roger<\/p><\/pre>\n
 <\/p>\n
p.nombre-perro { color: yellow; }<\/pre>\n
Para seleccionar elementos con un id espec\u00edfico, podemos usar esta sintaxis: #id {}<\/p>\n
Ejemplo:<\/p>\n
code<p id=\"nombre-perro\">Roger<\/p><\/pre>\n
 <\/p>\n
#nombre-perro { color: yellow; }<\/pre>\n
 <\/p>\n
Hay una gran diferencia entre esos dos selectores.<\/p>\n
Dentro de un documento HTML, puedes repetir el mismo valor de clase en varios elementos, pero solo puedes usar un id una vez.<\/p>\n
Usando clases puedes seleccionar un elemento con 2 o m\u00e1s nombres de clase espec\u00edficos, algo que no es posible usando ids.<\/p>\n
Puedes apuntar a un elemento que tenga 2 (o m\u00e1s) clases juntas combinando los nombres de clase separados por un punto, sin espacios.<\/p>\n
Ejemplo:<\/p>\n
<p class=\"nombre-perro roger\">Roger<\/p><\/pre>\n
.nombre-perro.roger { color: yellow; }<\/pre>\n
 <\/p>\n
De la misma manera, puedes combinar una clase y un id.<\/p>\n
Ejemplo:<\/p>\n
<p class=\"nombre-perro\" id=\"roger\">Roger<\/p><\/pre>\n
.nombre-perro#roger { color: yellow; }<\/pre>\n
Puedes crear un selector m\u00e1s espec\u00edfico combinando m\u00faltiples elementos para seguir la estructura del \u00e1rbol del documento. Por ejemplo, si tienes una etiqueta span anidada dentro de una etiqueta p, puedes apuntar a esa sin aplicar el estilo a una etiqueta span que no est\u00e9 incluida en una etiqueta p:<\/p>\n
<span>\u00a1Hola!<\/span> <p> El nombre de mi perro es: <span class=\"nombre-perro\">Roger<\/span> <\/p><\/pre>\n
p span { color: yellow; }<\/pre>\n
 <\/p>\n
Observa c\u00f3mo usamos un espacio entre los dos tokens p y span.<\/p>\n
Esto funciona incluso si el elemento a la derecha est\u00e1 varios niveles m\u00e1s profundo.<\/p>\n
Para hacer que la dependencia sea estricta al primer nivel, puedes usar el s\u00edmbolo > entre los dos tokens:<\/p>\n
p > span { \u00a0 color: yellow; }<\/pre>\n
 <\/p>\n
En este caso, si un span no es un hijo directo del elemento p, no se le aplicar\u00e1 el nuevo color.<\/p>\n
Los hijos directos tendr\u00e1n el estilo aplicado:<\/p>\n
<p> \u00a0 <span>Esto es amarillo<\/span> \u00a0 <strong> \u00a0 \u00a0 <span>Esto no es amarillo<\/span> \u00a0 <\/strong> <\/p><\/pre>\n
 <\/p>\n
Los selectores de hermanos adyacentes nos permiten dar estilo a un elemento solo si est\u00e1 precedido por un elemento espec\u00edfico. Lo hacemos usando el operador +:<\/p>\n
Ejemplo:<\/p>\n
p + span { \u00a0 color: yellow; }<\/pre>\n
 <\/p>\n
Esto asignar\u00e1 el color amarillo a todos los elementos span precedidos por un elemento p:<\/p>\n
<p>Este es un p\u00e1rrafo<\/p> <span>Este es un span amarillo<\/span><\/pre>\n
Deteng\u00e1monos un momento con los selectores ahora.<\/p>\n
Tenemos m\u00e1s, pero no quiero abrumarte.<\/p>\n
Hablaremos sobre algunos m\u00e1s despu\u00e9s.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
Hemos visto lo b\u00e1sico de los selectores. C\u00f3mo apuntar a una etiqueta: p { \u00a0…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1446"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1446"}],"version-history":[{"count":4,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1446\/revisions"}],"predecessor-version":[{"id":1450,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1446\/revisions\/1450"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}