Breaking

Post Top Ad

Your Ad Spot

miƩrcoles, 13 de noviembre de 2019

Seleccionar elementos CSS

Elemento

Para seleccionar todos los elementos que tienen el mismo nombre de etiqueta ( tag name ) utilizamos el nombre de la etiqueta como selector:
ul{ list-style:none; }

Lista de elementos

Podemos seleccionar una lista de elementos utilizando una coma , como separador entre los diferentes nombres de la etiqueta
ul, ol { list-style-position: outside; }

Elementos descendientes

Para seleccionar los elementos descendientes de un cierto elemento utilizamos un espacio como combinador. Por ejemplo ul li selecciona todos los elementos li situados dentro de listas sin orden ul.
ul li{ display: inline-block;}
Los elementos descendientes de un elemento ( padre ) son aquellos elementos anidados dentro del elemento padre o dentro de elementos hijos del elemento padre. Si necesitamos seleccionar solo los elementos hijos directos ( solo el primer nivel ) utilizamos el combinador > ( mayor que )

Elementos hijos

Para seleccionar los elementos hijos directos del elemento padre ( solo el primer nivel ) utilizamos el combinador > ( mayor que )
<section>
  <div><p>No serĆ” seleccionado</p></div>
    <p>SerĆ” seleccionado</p>
    <p>SerĆ” seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>SerĆ” seleccionado</p>
</section>
<p>No serĆ” seleccionado</p>
ol > li{ 
    color:red;
}

Elementos hermanos (~)

Podemos utilizar el combinador ~ ( tilde ) para seleccionar los elementos hermanos ( elementos descendientes del mismo elemento padre ) de esta manera:
div ~ p { color:red; }
Esto selecciona a todos los elementos hermanos <p> precedidos por un <div>; aunque el hermano previo adyacente no es un <div>
<section>
  <div><p>El div</p></div>
    <p>SerĆ” seleccionado</p>
    <p>SerĆ” seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>SerĆ” seleccionado</p>
</section>
<p>No serĆ” seleccionado</p>
Observación: En algunos navegadores antiguos esto no funciona con pseudo-selectores. Ejemplo:
:checked ~ p { color:red; }
<section>
  <input type="checkbox" checked="">
    <p>SerĆ” seleccionado</p>
    <p>SerĆ” seleccionado</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
  </ul>
  <p>SerĆ” seleccionado</p>
</section>
<p>No serĆ” seleccionado</p>

Elementos hermanos adyacentes

Podemos seleccionar un elemento situado inmediatamente despuĆ©s de otro ( elementos hermanos! ) utilizando el combinador +.
Por ejemplo si tenemos este HTML:
<form>
<input type="text" id="input0" required="">
<label for="input0">una etiqueta</label>

<textarea rows="4" cols="50" id="ta0"></textarea>
<label for="ta0">una etiqueta para textarea</label>
</form>
podemos seleccionar al elemento <label> siguiente utilizando este selector:
input[required] + label {text-decoration: underline;}
Esto selecciona al elemento label que viene inmediatamente despuĆ©s de un campo obligatorio ( elemento input que tiene un atributo required )

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

PƔginas