DIW

Appearance

A4. Selectores ​

Código de trabajo ​

html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Premio Nobel de Literatura</title>

    <!-- stylesheets -->
    <link rel="stylesheet" href="css/style01.css" />
  </head>
  <body>
    <h1>Premio Nobel de Literatura</h1>
    <p>
      El Premio Nobel de Literatura es uno de los cinco señalados en el
      testamento del filántropo sueco <em class="europe">Alfred Nobel</em>,
      quien pidiera que fueran entregados cada año «a quien hubiera producido en
      el campo de la literatura la obra más destacada, en la dirección ideal»,
      seleccionados por la Academia Sueca que los anuncia el primer jueves de
      cada octubre.
    </p>
    <h2>Quiénes no lo recibieron</h2>
    <p>
      Es un premio que ha ignorado a autores que realizaron aportes
      significativos a las letras y reconocidos a nivel mundial. Algunos
      expertos señalan que grandes autores clásicos del siglo XX no recibieron
      el premio. <em class="america">Ruben Darío</em> es considerado una
      influencia clave para la literatura hispana, siendo lider de la corriente
      modernista que marca un cambio en las letras castellanas y uno de los
      escritores y poetas mas leídos del habla hispana en todos los tiempos.
    </p>
    <p>
      Mientras que <em class="america">Mario Vargas Llosa</em> ganador del
      premio del año 2010, mencionó que
      <em class="america">Jorge Luis Borges</em> y
      <em class="america">César Vallejo</em> merecieron el premio.
    </p>
    <h3>Rechazaron el premio</h3>
    <p>
      Dos de los ganadores rechazaron recibir el premio, fueron:
      <em class="asia">Borís Pasternak</em> en 1958 (bajo una intensa presión
      del gobierno soviético) y <em class="europe">Jean-Paul Sartre</em> en 1964
      (alegando que su aceptación implicaría perder su identidad de filósofo).
    </p>
    <h2>Lista cronológica de premiados de 2008 a 2017</h2>
    <p>
      Hasta 2017 el galardón de Literatura ha sido entregado a 114 personas. A
      partir de 2008 lo han recibido (hasta 2017):
    </p>
    <ul>
      <li id="a2008" class="europe">2008 - Jean-Marie Gustave Le Clézio</li>
      <li id="a2009" class="europe">2009 - Herta Müller</li>
      <li id="a2010" class="america">2010 - Mario Vargas Llosa</li>
      <li id="a2011" class="europe">2011 - Tomas Tranströmer</li>
      <li id="a2012" class="asia">2012 - Mo Yan</li>
      <li id="a2013" class="america">2013 - Elfriede Alice Munro</li>
      <li id="a2014" class="europe">2014 - Patrick Modiano</li>
      <li id="a2015" class="asia">2015 - Svetlana Alexievich</li>
      <li id="a2016" class="america">2016 - Bob Dylan</li>
      <li id="a2017" class="asia"><em>2017 - Kazuo Ishiguro</em></li>
    </ul>
  </body>
</html>
css
/* ------------------------------------------------- */
/* Styles                                            */
/* ------------------------------------------------- */
em {
    display: inline-block;
}

/* ------------------------------------------------- */
/* Basic selectors                                   */
/* ------------------------------------------------- */
/* 1 - Universal selector */
* { margin: 0px; padding: 0px;}

/* 2 - Element selector */
h1, h2 {
    font-family: sans-serif;
    color: blue;
}

/* 3 - Class selector */
.america {
    color: red;
}
em.america {
    color: green;
}

/* ID selector */
#a2013 {
    color: deepskyblue;
}

/* ------------------------------------------------- */
/* Advanced selectors (Attribute selectors)          */
/* ------------------------------------------------- */
li[id] {
    margin-left: 50px;
}

/* Código del ejercicio 1 */

/* selector de atributo {
    text-decoration: underline;
} */

/* ------------------------------------------------- */
/* Advanced selectors (Pseudo-classes)               */
/* ------------------------------------------------- */

/* Código del ejercicio 2 */

/* selector de pseudoclase {
    background-color: chartreuse;
} */

/* ------------------------------------------------- */
/* Advanced selectors (Pseudo-elements)              */
/* ------------------------------------------------- */

/* Código del ejercicio 3 */

/* selector de pseudoelemento {
    declaración;
} */

Ejercicio 1 ​

Escoge el selector de atributo que subraye los elementos de la lista entre 2000 y 2010, como se muestra en la imagen. Debes usar un patrón de ID.

Ejercicio 1

css
selector de atributo {
  text-decoration: underline;
}

Ejercicio 2 ​

Escoge el selector de pseudoclase que coincida con los elementos h2 para cambiar la propiedad background-color cuando el cursor esté sobre ellos, como se muestra en la imagen.

Ejercicio 2

css
selector de pseudoclase {
  background-color: chartreuse;
}

Ejercicio 3 ​

Escoge el selector de pseudoelemento y la declaración que escriba las clases de los elementos de la lista al final de cada elemento, como se muestra en la imagen.

Ejercicio 3

css
selector de pseudoelemento {
    declaración;
}

Recursos adicionales ​