waitedForU
[02] Selector - CSS3 본문
1. CSS3 Selector
1) 간접 selector
- $("태그1~태그2") : 특정 태그 뒤에 나타나는 태그
>>>> css3_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>간접 셀렉터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#second ~ li").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) 부정유사 클래스(Negation pseudo-class)
- $("태그1:not(태그2)") : 태그1 안에서 태그2를 제외한 태그
>>>> css3_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Negation pseudo-class</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:not(:first-child)").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) empty 유사 클래스
- $("태그:empty") : 자식태그 혹은 문자열을 포함하지 않는 태그
>>>> css3_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty 유사클래스</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:empty").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
</ul>
</body>
</html>
4) nth-child 유사클래스
- $("태그:nth-child(번호)") : 특정 태그안에서 지정한 번호의 태그
>>>> css3_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:nth-child(3)").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
5) last-child 유사클래스
- $("태그:last-child") : 동일 태그안의 가장 마지막 태그
>>>> css3_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>last-child</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:last-child").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
6) only-child 유사클래스
- $("태그:only-child") : 특정태그가 하나만 포함된 태그
>>>> css3_06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>only-child</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li span:only-child").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><span> 텍스트</span> 텍스트 텍스트 텍스트 텍스트</li>
<li><span> 텍스트</span> 텍스트<span> 텍스트</span>
텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
'JQuery' 카테고리의 다른 글
| [06] jQuery 이벤트 (0) | 2016.05.20 |
|---|---|
| [05] jQuery 기본 명령어 (0) | 2016.05.20 |
| [04] jQuery 필터 (0) | 2016.05.20 |
| [01] jQuery 설치, Selector - CSS, CSS2 (0) | 2016.05.20 |
Comments