코딩 배우기 | Learning Coding | CSS Selectors 두번째
코딩 배우기 | Learning Coding | CSS Selectors 두번째
CSS CLASSES AND IDS _ CSS Selectors
14/23 Even finer control
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<ul>
<li><a href="http://www.codecademy.com/">Codecademy Home</a></li>
<li><a href="http://www.codecademy.com/learn">Learn</a></li>
<li><a href="http://www.codecademy.com/create/creator">Teach</a></li>
<li><a href="http://www.codecademy.com/edit_account/basic_info">Settings</a></li>
</ul>
</body>
</html>
File2 _ stylesheet.css
a:hover {color: #cc0000;
font-weight: bold;
text-decoration: none;
}
15/23 Links
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<a href="http://jonestudio.blogspot.kr/">JONE STUDIO</a>
<ul>
<li><a href="http://jonestudio.blogspot.kr/">JONE STUDIO</a></li>
<li><a href="http://www.codecademy.com/">Codecademy</a></li>
<li><a href="http://newsun1.blog.me">JONE STUDIO.2</a></li>
</ul>
</div>
</body>
</html>
File2 _ stylesheet.css
a:link {color: #008b45;
text-decoration: none;
}
a:hover {
color: #00ff00;
}
a:visited {
color: #ee9a00;
}
16/23 First chile
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<p>I'm the first child!</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
</div>
</body>
</html>
File2 _ stylesheet.css
p:first-child {font-family: cursive;
}
17/23 Nth child
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<p>I'm the first child!</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
</div>
</body>
</html>
File2 _ stylesheet.css
p:first-child {
font-family: cursive;
}
p:nth-child(2) {
font-family: Tahoma;
}
p:nth-child(3) {
color: #cc0000;
}
p:nth-child(4) {
background-color: #00ff00;
}
p:nth-child(5) {
font-size: 22px;
}
18/23 Show it if you know it!
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<!--Add your HTML below!-->
<a href="http://jonestudio.blogspot.kr/">Just</a>
<a href="http://jonestudio.blogspot.kr/">Do</a>
<a href="http://jonestudio.blogspot.kr/">It</a>
<div>
<p><a href="http://jonestudio.blogspot.kr/">Just</a></p>
<p><a href="http://jonestudio.blogspot.kr/">Do</a></p>
<p><a href="http://jonestudio.blogspot.kr/">It</a></p>
</div>
</body>
</html>
File2 _ stylesheet.css
a:hover {
text-decoration: none;
}
a:first-child {
color: #cdbe70;
}
a:nth-child(3) {
color: #ffc125;
}
a:nth-child(6) {
color: #ffc125;
}
| div태그 안에 a는 왜...
CSS Selectors | Review | Codecademy
19/23 Final section breather
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
File2 _ stylesheet.css
20/23 Multiple selectors
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<ul>
<li><p>Grab me!</p></li>
<li><p>Me, too!</p></li>
</ul>
</div>
<p>Don't grab me!</p>
</body>
</html>
File2 _ stylesheet.css
li {
font-size: 30px;
}
21/23 Class selectors
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<!--Add your HTML below!-->
<h3 class="fancy">Codecademy</h3>
<p class="fancy">Class selectors</p>
</body>
</html>
File2 _ stylesheet.css
.fancy {
font-family: cursive;
color: violet;
}
22/23 ID selectors
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<!--Add your HTML below!-->
<h3 class="fancy">Codecademy</h3>
<p class="fancy">Class selectors</p>
<p id="serious">ID selectors</p>
</body>
</html>
File2 _ stylesheet.css
.fancy {
font-family: cursive;
color: violet;
}
#serious {
font-family: Courier;
color: #8c8c8c;
}
23/23 Pseudo selectors
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<!--Add your HTML below!-->
<h3 class="fancy">Codecademy</h3>
<p class="fancy">Class selectors</p>
<p id="serious">ID selectors</p>
<p>Pseudo selectors</p>
</body>
</html>
File2 _ stylesheet.css
.fancy {
font-family: cursive;
color: violet;
}
#serious {
font-family: Courier;
color: #8c8c8c;
}
body :nth-child(4) {
font-size: 26px;
}
| Remember: your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!
또, 한 가지 더.
| Make sure to leave a space between body :nth-child. If you don't have a space it means "find the body tag that is an nth-child". If you have a space it menas "find the nth-child of the body tag".