Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
pseudo-selector 오류에 관한 질문입니다.
#html_css
3년 전
1,469
6

안녕하세요, 챌린지 과제 중 질문이 있습니다.

CSS 코드에서 배경의 색을 지정하는 부분에서,

첫번째 section의 첫번째 두번째 div의 색깔 지정,

두번째 section의 첫번째 두번째 div의 색깔 지정,

을 각각 수행하였는데, 어떤 이유에서인지

Burlywood, thistle이 위 div에 출력되고

아래 div엔 아무것도 출력되지 않습니다.

제가 해본 것: section 쪽의 nth-child 를 이리저리 변경해봤는데, 이상하게도 두 section의 위치를 바꾸면 잘 출력이 됩니다. 즉 두번째 section을 1st child로, 첫번째 section을 2nd child로 인식하는 것 같습니다.

나머지 서식들은 다 해결하였고 이 색 지정 부분만 남은 상태입니다.

어디가, 왜 잘못된 것일까요? 두시간째 고민하다가 답이 나오지 않아 질문 올립니다.

(html 코드)

<!DOCTYPE html>

<html>

<head>

<link href="assignment3.css" rel="stylesheet" />

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>repl.it</title>

</head>

<body>

<h1>The Best Colors</h1>

<section class="section">

<div class="section__color">

<div class="section__color__bg"></div>

<div class="section__color__info">

<h3>Tomato</h3>

<h4>#FF6347</h4>

</div>

</div>

<div class="section__color">

<div class="section__color__bg"></div>

<div class="section__color__info">

<h3>Teal</h3>

<h4>#008080</h4>

</div>

</div>

</section>

<section class="section">

<div class="section__color">

<div class="section__color__bg"></div>

<div class="section__color__info">

<h3>Burlywood</h3>

<h4>#DEB887</h4>

</div>

</div>

<div class="section__color">

<div class="section__color__bg"></div>

<div class="section__color__info">

<h3>Thistle</h3>

<h4>#D7BFD7</h4>

</div>

</div>

</section>

</body>

</html>

(CSS 코드) 

body {

background-color: whitesmoke;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

}

h1 {

font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;

font-weight: bold;

}

.section {

width: 30%;

display: flex;

flex-direction: row;

justify-content: space-evenly;

align-items: center;

}

.section__color {

background-color: white;

width: 50%;

padding: 10px;

position: relative;

}

.section__color__bg {

height: 400px;

border: 5px white solid;

}

.section__color__info {

width: 95%;

position: absolute;

background-color: white;

margin: 10px 0px;

padding-left: 4px;

top: 20px;

}

.section:nth-child(1) div:nth-child(1) .section__color__bg {

background-color: tomato;

}

.section:nth-child(1) div:nth-child(2) .section__color__bg {

background-color: teal;

}

.section:nth-child(2) div:nth-child(1) .section__color__bg {

background-color: burlywood;

}

.section:nth-child(2) div:nth-child(2) .section__color__bg {

background-color: thistle;

}

6 comments