https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
Test your skills: Selectors - Learn web development | MDN
The aim of this skill test is to assess whether you understand CSS selectors.
developer.mozilla.org
- Task 1
type-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Selectors: Type Selectors</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
h1 {
color: blue;
}
h2 {
background-color: blue;
color: white;
}
span {
font-size: 200%;
}
</style>
</head>
<body>
<div class="container">
<h1>This is a heading</h1>
<p>
Veggies es <span>bonus vobis</span>, proinde vos postulo essum magis
kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
garlic.
</p>
<h2>A level 2 heading</h2>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
</body>
</html>
결과
- Task 2
class-id-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Selectors: Class and ID Selectors</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
#special {
background-color: yellow;
}
.alert {
border: 1px solid grey;
}
.alert.stop {
background-color: red;
}
.alert.go {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>This is a heading</h1>
<p>
Veggies es <span class="alert">bonus vobis</span>, proinde vos postulo
<span class="alert stop">essum magis</span>
kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
garlic.
</p>
<h2 id="special">A level 2 heading</h2>
<p>Gumbo beet greens corn soko endive gumbo gourd.</p>
<h2>Another level 2 heading</h2>
<p>
<span class="alert go">Parsley shallot</span>
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
</body>
</html>
결과
- Task 3
폴더 구조
styles.css
.container > p:first-child::first-line {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
table tr:nth-child(even) {
background-color: #333;
color: white;
}
- Task 4
combinators-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Selectors: Combinators</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
h2 {
margin: 0;
}
h2 + * {
color: red;
}
ul.list > li {
list-style-type: none;
border-bottom: 1px solid grey;
}
</style>
<style class="editable"></style>
</head>
<body>
<div class="container">
<h2>This is a heading</h2>
<p>This paragraph comes after the heading.</p>
<p>This is the second paragraph.</p>
<h2>Another heading</h2>
<p>This paragraph comes after the heading.</p>
<ul class="list">
<li>One</li>
<li>
Two
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>Three</li>
</ul>
</div>
</body>
</html>
결과
- Task 5
attribute-link-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Selectors: attribute selectors</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0 0 0.5em;
}
a {
display: block;
padding: 0.5em;
}
a {
border: 5px solid grey;
}
a[href*="contact"] {
border-color: orange;
}
a[href^="https"] {
border-color: green;
}
/*이렇게 해야 pink색이 적용된다. CSS 우선순위*/
a[title] {
border-color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="https://example.com">Link 1</a>
</li>
<li>
<a href="https://example.com" title="Visit example.com">Link 2</a>
</li>
<li>
<a href="/contact">Link 3</a>
</li>
<li>
<a href="../contact/index.html">Link 4</a>
</li>
</ul>
</body>
</html>
결과
오류 있으면 댓글 남겨주세요! 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 값과 단위 (4) | 2024.10.18 |
|---|---|
| [CSS]과제: 계단식 상속 (2) | 2024.10.17 |
| [CSS]과제: 새로운 지식을 사용하기 (8) | 2024.10.15 |
| [HTML] 과제: 행성 데이터 구조화 (2) | 2024.10.15 |
| [HTML]과제: 반응형 이미지 (6) | 2024.10.15 |
