[css selector] X + Y / X > Y / X ~ Y

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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s