ref: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
X + Y
X의 형제 엘리먼트로 바로 다음에 오는 엘리먼트 Y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
ul + p {
color: red;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</body>
</html>
X ~ Y
X의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 Y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
ul ~ p {
color: red;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</body>
</html>
X > Y
X의 바로 아래 자식이면서 태그 명이 Y인 모든 엘리먼트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
#container > ul {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
<ul>
My Name
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</body>
</html>
His story and technical story 