카테고리 없음
[03] Selector - CSS 속성
Mr.Bini
2016. 5. 20. 11:43
1. Selector - CSS 속성
1) [attribute]
- $("[속성명]") : 특정 속성을 가진 태그
>>>> attr_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(){
$("[id]").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li class="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li class="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) [attribute='value']
- $("[속성명='값']") : 특정 속성이 지정한 값을 가진 태그
>>>> attr_02.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(){
$("[title='second']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) [attribute!='value']
- $("태그명[속성명!='값']") : 특정 속성이 지정한 값을 갖지 않은 태그
>>>> attr_03.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(){
$("li[title!='first']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
4) [attribute^='value']
- $("태그명[속성명^='값']") : 특정 속성이 지정한 값으로 시작되는 태그
>>>> attr_04.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(){
$("[title^='f']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
5) [attribute$='value']
- $("태그명[속성명$='값']") : 특정 속성이 지정한 값으로 끝나는 태그
>>>> attr_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("[title$='d']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
6) [attribute*='value']
- $("태그명[속성명*='값']") : 특정 속성이 지정한 값을 포함하고 있는 태그
>>>> attr_06.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(){
$("[title*='ir']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
7) [attributeFilter1]
[attributeFilter2]
- $("[태그셀렉터1]
[태그셀렉터2]") : 복수 속성 셀렉터에 해당하는 태그
>>>> attr_07.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(){
$("[title^='f'][title*='th']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>