2017. 2. 18. 22:44ㆍWork/CSS
CSS3 선택자 기본
<style></style>
// 여러가지 선택자가 있음 *, 태그, #아이디, .클래스 등등
// 선택자는 직접 선언 할 수 있음
ex) ro.classor{background-color: yellow;}
<ro class="classor">Create Tag</ro>
- 클래스 선택자 & 다중 선택자 지정
ex) .select{color: fuchsia;}
.idclassed{background-color: red;}
<h2 class="select idclassed">CSS3 Selector Basic</h2>
- 아이디 선택자
ex) #box1{ width:80px; height: 80px; margin:0px; padding:0px; background-color: cyan}
<div id="box1">[0,0]</div>
-> 아이디 선택자는 중복이 가능 하다.
ex) <h1 id="box1"></h1> <h2 id="box1"></h2> ...
- 속성 선택자
선택자[속성], 선택자[속성=값][속성=값]
ex) input[type=text]{background: red;}
input[type=password]{background: green;}
input[type=ro]{background: black;}
<input type="text">
<input type="password">
<input type="ro">
- 문자열 속성 선택자
선택자[속성~=값] : 속성 안의 값이 특정 값을 단어로 포함하는 태그
선택자[속성|=값] : 속성 안의 값이 특정 값을 단어로 포함하는 태그
선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그
선택자[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 태그
선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그
ex) img[src$=jpg]{border : 3px solid blue;}
<img src="weare.jpg">
- 후손 선택자 & 자손 선태자
<body>
<!--후손-->
<ul>
<!--자손-->
<li class="select">asddd</li>
</ul>
</body>
-- 후손 선택자
#roing h6{color:deepskyblue;}
<div id="roing">
<h6>후손 선택자</h6>
<h6>후손 선택자</h6>
<div>
<h6>후손 선택자</h6>
<h6>후손 선택자</h6>
</div>
</div>
-- 자손 선택자
#roinged > h6{color:darkviolet;}
<div id="roinged">
<h6>자손 선택자</h6>
<h6>자손 선택자</h6>
<div>
<h6>자손 선택자</h6>
<h6>자손 선택자</h6>
</div>
</div>
- 동위 선택자
- 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택
A + B {background-color: chartreuse;}
- 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택
A ~ B {background-color: coral;}
<A>Step's A</A>
<B>Step's B</B>
<A>Step's A</A>
<B>Step's B</B>
<B>Step's B</B>
<B>Step's B</B>
- 반응 선택자
- :active : 사용자가 마우스로 클릭한 태그
act:active{color: deeppink;}
- :hover : 사용자가 마우스를 올린 태그
hov:hover{color: aqua;}
<hov>hover set</hov>
<act>active set</act>
- 상태 선택자
- :checked : 체크 상태의 input 태그 선택
input[type=checkbox]:checked + div{height: 50px;}
<input type="checkbox" />
<div>asdasd</div>
- :focus : 초점이 맞추어진 input 태그 선택, 웹 페이지 하나당 한개의 focus 유지됨
input:focus{background-color: orangered;}
- :enabled : 사용 가능한 input 태그 선택
input:enabled{background-color: deepskyblue;}
<input enabled>
- :disabled : 사용 불가능한 input 태그 선택
input:disabled{background-color: darkred;}
<input disabled>
- 구조 선택자
-- 일반 구조 선택자
--- :first-child : 형제 관계 중에서 첫 번째에 위치하는 태그 선택
li:first-child{border-radius: 10px 0 0 10px;}
--- :last-child : 형제 관계 중에서 마지막에 위치하는 태그 선택
li:last-child{border-radius: 0 10px 10px 0;}
--- :nth-child(수열) : 형제 관계 중에서 앞에서 수열 번째에 태그를 선택
li:nth-child(2n){background-color: #FF0003;}
--- :nth-last-child(수열) : 형제 관계 중에서 뒤에서 수열 번째에 태그를 선택
li:nth-last-child(2n+1){background-color: #800000;}
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
-- 형태 구조 선택자
--- :first-of-type : 형제 관계 중에서 첫 번째로 등장하는 특정 태그 선택
h1:first-of-type{color:red;}
--- :last-of-type : 형제 관계 중에서 마지막으로 등장하는 특정 태그 선택
h2:last-of-type{color:blue;}
--- :nth-of-type(수열) : 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그 선택
h3:nth-of-type{color:fuchsia;}
--- :nth-last-of-type(수열) : 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그 선택
h4:nth-last-of-type{color:fuchsia;}
<h1>Head 1</h1>
<h2>Head 2</h2>
<h3>Head 3</h3>
<h4>Head 4</h4>
<h4>head 4</h4>
<h3>head 3</h3>
<h2>head 2</h2>
<h1>head 1</h1>
- 문자 선택자
-- 시작 문자 선택자
--- ::first-letter : 첫 번째 글자를 선택
p::first-letter{color:brown;}
--- ::first-line : 첫 번째 줄을 선택
p::first-line{color:royalblue;}
-- 전후 문자 선택자
--- ::after : 태그 뒤에 위치하는 공간을 선택
p::after{content:counter(rint) ".";}
--- ::before : 태그 앞에 위치하는 공간을 선택
p::before{content:counter(rint) ",";}
<p>Flet Set</p>
<p>Fline Set</p>
- 반응 문자 선택자
-- ::selection : 사용자가 드래그한 글자를 선택
Draging::selection{background: black; color:red;}
<Draging>Drag Line</Draging>
- 링크 선택자
-- :link : href 속성을 가지고 있는 a 태그 선택
a:link::after{content : '-' attr(href);}
-- :visited : 방문했던 링크를 가지고 있는 a 태그 선택
a:visited{color:aqua;}
<a href="http://www.w3.org/">W3C</a>
- 부정 선택자
-- :not(선택자) : 선택자를 반대로 적용
input:not([type=password]){background: red;}
<input type="password">
<input type="text">
<style>
h1{color:red; background-color: orange;}
</style>
h1(선택자{color(스타일 속성):red(스타일값;}
-> style 태그 내부에 사용