보임 필터 선택자
화면에 보이거나 보이지 않는 요소를 찾습니다.
보임 필터 선택자(Visibility Filters)
visibility:hidden;이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.
컨텐츠를 보이지 않게 하는 방법
- display:none;
- visibility:hidden;
- opacity:0;
- width:0; height:0;
- form 요소 중에 type="hidden"
- 부모 요소가 보이지 않거나 숨겨져 있을 때
보임 필터 선택자
| 종류 | 설명 |
|---|---|
| :hidden | 보이지 않는 요소를 선택합니다. |
| :visible | 보이는 요소를 선택합니다. |
Sample1
내용 필터 선택자 예제입니다.
결과
속성 선택자
- 기본 선택자
- 계층 선택자
- 속성 선택자
- 기본 필터 선택자
- 내용 필터 선택자
- 보임 필터 선택자
- 자식요소 필터 선택자
- 폼 필터 선택자
jquery
$(".list li:hidden").show().addClass("rLine");
$(".list li:visible").addClass("rLine");html
<h3>속성 선택자</h3>
<div>
<ul class="list">
<li>기본 선택자</li>
<li>계층 선택자</li>
<li>속성 선택자</li>
<li>기본 필터 선택자</li>
<li>내용 필터 선택자</li>
<li>보임 필터 선택자
<ul>
<li style="display: none;">:hidden</li>
<li style="display: none;">:visible</li>
</ul>
</li>
<li>자식요소 필터 선택자</li>
<li>폼 필터 선택자</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
.choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>속성 선택자</h3>
<div>
<ul class="list">
<li>기본 선택자</li>
<li>계층 선택자</li>
<li>속성 선택자</li>
<li>기본 필터 선택자</li>
<li>내용 필터 선택자</li>
<li>보임 필터 선택자
<ul>
<li style="display: none;">:hidden</li>
<li style="display: none;">:visible</li>
</ul>
</li>
<li>자식요소 필터 선택자</li>
<li>폼 필터 선택자</li>
</ul>
</div>
<div class="choice">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 <em>:hidden</em>를 보이게 합니다.</a>
<a href="#" class="btn2">클릭하면 <em>:visible</em>를 선택합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice .off1").on("click", function(e){
e.preventDefault();
$(".list li").removeClass("rLine");
$(".list li ul li").css("display","none");
});
$(".choice .btn1").on("click", function(e){
e.preventDefault();
$(".list li:hidden").show().addClass("rLine");
});
$(".choice .btn2").on("click", function(e){
e.preventDefault();
$(".list li:visible").addClass("rLine");
});
</script>
</body>
</html>
