0

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li{
  float: left;
}
#menu:first-child {
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li a:hover{
  background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="home.html">Inicio</a></li>
    <li><a href="maths.html">Matemáticas</a></li>
    <li><a href="physics.html">Física</a></li>
    <li><a href="computacion.html">Computación</a></li>
    <li><a href="others.html">Otro</a></li>
  </ul>
</body>
</html>

Intento cambiar el color del primer li, ya que esta será el seleccionado por defecto al entrar a la web, con este código:

#menu:first-child {
  background-color:gray;
}

,que obviamente ya está incluido dentro del snippet, por qué no funciona?

2 respuestas 2

2

De esta manera también puedes conseguir lo que quieres, tienes que cambiar el fondo a la etiqueta a debido a que más abajo le das un display:block y background-color: black

#menu li:first-child a{
    background-color:gray;
}
2
  • ¿De qué manera esto soluciona el inconveniente cuando se hace hover sobre otro menú? El primer elemento seguirá seleccionado, @EduardoSebastian.
    – gugadev
    el 4 sep. 2017 a las 17:00
  • En un principio lo que @Eduardo comentaba era que: No cambia el color first child CSS, ahora, para conseguir el efecto que quieres tendrías que utilizar Javascript, de momento nunca lo he hecho con CSS.
    – yomar_crm
    el 4 sep. 2017 a las 18:28
1

Intento cambiar el color del primer li

Entonces debes aplicar el pseudoselector a li en lugar de al menú.

#menu li:first-child > a {
  background-color: gray;
}

Nota que aplicamos la regla al hijo del primer li que es a porque estos tienen como fondo negro.


Actualización

Pero cuando selecciono a otro, sigue apareciendo gris

Claro, porque utilizas first-child lo cual origina que este elemento siempre tenga dichas reglas. Lamentablemente el selector ~ solo selecciona hermanos adyacentes, no previos.

Esto comportamiento lo puedes realizar con Flexbox o con JavaScript.

Flexbox

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  display: flex;
  flex-direction: row-reverse;
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li {
  float: left;
}
#menu li a {
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li:last-child > a {
  background-color: gray;
}
#menu li:hover > a {
  background-color: gray;
}
#menu li:hover ~ li > a {
  background-color: #000;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="#others.html">Otro</a></li>
    <li><a href="#computacion.html">Computación</a></li>
    <li><a href="#physics.html">Física</a></li>
    <li><a href="#maths.html">Matemáticas</a></li>
    <li><a href="#home.html">Inicio</a></li>
  </ul>
</body>
</html>

JavaScript

let activeMenuPosition = 0;

const menus = Array.from(document.querySelectorAll('#menu li'));
menus.forEach(function(menu) {
  menu.addEventListener('mouseenter', function() {
    resetActiveMenu();
  });
  menu.addEventListener('mouseleave', function() {
    restoreActiveMenu();
  });
});

function getActiveMenu() {
  return menus.find(function(menu) {
    return menu.classList.contains('active');
  });
}

function getActiveMenuPosition() {
  const activeMenu = getActiveMenu();
  return menus.indexOf(activeMenu);
}

function resetActiveMenu() {
  const activeMenu = getActiveMenu();
  activeMenu.classList.remove('active');
}

function restoreActiveMenu() {
  const activeMenu = menus[activeMenuPosition];
  activeMenu.classList.add('active');
}
/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li {
  float: left;
}
#menu li a {
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li:hover a,
#menu li.active a {
  background-color: gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li class="active"><a href="#home.html">Inicio</a></li>
    <li><a href="#maths.html">Matemáticas</a></li>
    <li><a href="#physics.html">Física</a></li>
    <li><a href="#computacion.html">Computación</a></li>
    <li><a href="#others.html">Otro</a></li>
  </ul>
</body>
</html>

Con Flexbox solucionas el problema cuando por defecto el menú activo es el primero, pero si el elemento activo es el último, tendrás el mismo inconveniente.

4
  • Pero cuando selecciono a otro, sigue apareciendo gris
    – ESCM
    el 4 sep. 2017 a las 16:29
  • Me podrias dar información de ese operador > en css
    – ESCM
    el 4 sep. 2017 a las 16:30
  • Te quedá seleccionado porque lo que haces es que siempre que la lista cargue el primer elemento de esa lista tendrá un fondo gris. Si lo que deseas es que cuando des click en otro el fondo se cambie lo puedes hacer creando una clase .active #menu li.active > a { background-color: gray; }
    – sarevalo
    el 4 sep. 2017 a las 16:47
  • 1
    @EduardoSebastian Respuesta editada. Ten un poco más de criterio al seleccionar las respuestas "correctas" para no confundir a visitantes con los mismos problemas.
    – gugadev
    el 4 sep. 2017 a las 17:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.