Непонятное поведение background-image. Наследование

300

13 февраля 2018, 06:15

Доброго времени суток! Верстаю header. Разбит он на 3 секции.В свою очередь, каждая секция разбита на 3 фигуры. В каждой секции должен быть свой background из чего формируется картинка, фигуры без background. Я решил поверстать по методологии "наследование"(возможно есть другие названия). И вот сразу же проблема - background ведет себя не ожидаемо. background первой секции применяется не к ней, а к родителю (к header). А background остальных 2-х секций не применяются.

#header { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid; 
  width: 100%; 
  height: 200px; 
} 
#header .section{ 
width: 33%; 
border: 1px solid; 
  display: flex; 
  justify-content: space-between; 
 
} 
#header:first-child { 
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/56/hamburger-576419__340.png"); 
  background-repeat: no-repeat; 
  background-position: bottom; 
  background-size: 100% 20%; 
} 
#header:nth-child(2) { 
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/40/steak-575806__340.png"); 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
} 
#header:nth-child(3) { 
  background-image: url("https://cdn.pixabay.com/photo/2013/07/13/10/12/cup-156743__340.png"); 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
} 
 
#header:first-child .widget{ 
 width: 25%; 
  border: 1px solid red; 
  height: 50%; 
} 
 
#header:first-child .widget:first-child{ 
  /*background: none;*/ 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
}

<header id="header"> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
</header>

Во всех учебниках указывают, что псевдокласс :first-child пишется без пробела. Но я решил поставить пробел. В итоге, background первой секции стал как нужно, но при этом, все первые элементы секций (фигуры) наследовали этот background. Ниже 2-й вариант кода, с пробелом, перед псевдоклассом

#header { 
  display: flex; 
  justify-content: space-between; 
  border: 1px solid; 
  width: 100%; 
  height: 200px; 
} 
#header .section{ 
width: 33%; 
border: 1px solid; 
  display: flex; 
  justify-content: space-between; 
 
} 
#header :first-child { 
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/56/hamburger-576419__340.png"); 
  background-repeat: no-repeat; 
  background-position: bottom; 
  background-size: 100% 20%; 
} 
#header:nth-child(2) { 
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/40/steak-575806__340.png"); 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
} 
#header:nth-child(3) { 
  background-image: url("https://cdn.pixabay.com/photo/2013/07/13/10/12/cup-156743__340.png"); 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
} 
 
#header:first-child .widget{ 
 width: 25%; 
  border: 1px solid red; 
  height: 50%; 
} 
 
#header:first-child .widget:first-child{ 
  /*background: none;*/ 
  background-repeat: no-repeat; 
  background-size: 70px 70px; 
}

<header id="header"> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
<section class="section"> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
	<figure class="widget"></figure> 
</section> 
</header>

Как быть? Я совсем запутался)

Answer 1

Пробел ставить не нужно,ошибка в селекторах(последний специально оставил каскадом чтобы было понятнее)

.section:first-child {
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/56/hamburger-576419__340.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 20%;
}
.section:nth-child(2)  {
  background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/40/steak-575806__340.png");
  background-repeat: no-repeat;
  background-size: 70px 70px;
}
#header .section:nth-child(3) {
  background-image: url("https://cdn.pixabay.com/photo/2013/07/13/10/12/cup-156743__340.png");
  background-repeat: no-repeat;
  background-size: 70px 70px;
}