<html lang="ko">
<head>
<meta charset="UTF-8">
<title>콘텐츠 필터 선택자</title>
<style>
* {
margin: 5px;
}
#m1 > p:last-child {
height: 20px;
}
span {
display: inline-block;
height: 20px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="m1">
<p>html, css, javascript</p>
<p>html5와 웹표준</p>
<p></p>
</div>
<div id="m2">
<span></span>
<span>내용1</span>
</div>
<div id="m3">
<section>
<article>내용2_1</article>
</section>
<section>
<div>
<article>내용2_2</article>
</div>
</section>
</div>
</body>
</html> $(document).ready(function() {
$("#m1 > p:contains('html')").css("border", "4px solid red");
$("#m1 > p:empty").css("border", "4px solid orange");
$("#m2 > span:parent").css("border", "4px solid yellow");
$("#m3 > section:has(article)").css("border", "4px solid green");
});
External CSS
This Pen doesn't use any external CSS resources.