<body>
<div id="m1">
<span>내용1_1</span>
<span>내용1_2</span>
<span>내용1_3</span>
</div>
<div id="m2">
<strong>내용2_1</strong>
<span>내용2_2</span>
<strong>내용2_3</strong>
<span>내용2_4</span>
</div>
<div id="m3">
<span>내용3_1</span>
<span>내용3_2</span>
<span>내용3_3</span>
</div>
<div id="m4">
<strong>내용4_1</strong>
<span>내용4_2</span>
<strong>내용4_3</strong>
<span>내용4_4</span>
<strong>내용4_5</strong>
<span>내용4_6</span>
</div>
<div id="m5">
<span>내용5_1</span>
</div>
<div id="m6">
<strong>내용6_1</strong>
<span>내용6_2</span>
</div>
</body>span {
margin: 5px;
display: inline-block;
}$(document).ready(function() {
$("#m1 > span:first-child").css("border", "2px solid red");
$("#m1 > span:last-child").css("border", "2px solid red");
$("#m2 > span:first-of-type").css("border", "2px solid orange");
$("#m2 > span:last-of-type").css("border", "2px solid orange");
$("#m3 > span:nth-child(1)").css("border", "2px solid yellow");
$("#m3 > span:nth-last-child(1)").css("border", "2px solid yellow");
$("#m4 > span:nth-of-type(1)").css("border", "2px solid green");
$("#m4 > span:nth-last-of-type(1)").css("border", "2px solid green");
$("#m5 > span:only-child").css("border", "2px solid blue");
$("#m6 > span:only-of-type").css("border", "2px solid navy");
})
External CSS
This Pen doesn't use any external CSS resources.