태그
#아이디
.클래스
태그[속성]
태그[속성="속성값"]
*
https://poiemaweb.com/css3-selector
1. 전체 셀렉터 (Universal Selector)
HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)
2. 태그 셀렉터 (Type Selector)
태그명 지정된 태그명을 가지는 요소를 선택한다.
3. ID 셀렉터 (ID Selector)
#id 어트리뷰트 값 id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.
4. 클래스 셀렉터 (Class Selector)
.class 어트리뷰트 값 class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다.
5. 어트리뷰트 셀렉터 (Attribute Selector)
셀렉터[어트리뷰트] 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.
6. 복합 셀렉터 (Combinator)
6.1 후손 셀렉터 (Descendant Combinator)
<style>
/* div 요소의 후손요소 중 p 요소 */
div p { color: red; }
</style>6.2 자식 셀렉터 (Child Combinator)
<style>
/* div 요소의 자식요소 중 p 요소 */
div > p { color: red; }
</style>6.3 형제(동위) 셀렉터 (Sibling Combinator)
<style>
/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
p + ul { color: red; }
</style>6.3.1 인접 형제 셀렉터(Adjacent Sibling Combinator)
<style>
/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. p다음 바로 ul이 있어야 선택가능*/
p + ul { color: red; }
</style>6.3.2 일반 형제 셀렉터(General Sibling Combinator)
<style>
/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다. p부터 ul사이에 잇는 것 전부 */
p ~ ul { color: red; }
</style>7. 가상 클래스 셀렉터 (Pseudo-Class Selector)
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.
마우스가 올라와 있을때
링크를 방문했을 때와 아직 방문하지 않았을 때
포커스가 들어와 있을 때
이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.
가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
<style>
/* a 요소가 hover 상태일 때 */
a:hover { color: red; }
/* input 요소가 focus 상태일 때 */
input:focus { background-color: yellow; }
</style>7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)
pseudo-class Description
:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터에 포커스가 들어와 있을 때 <style>
/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }
/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }
/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }
/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }
/* text input 요소와 password input 요소에 포커스가 들어와 있을 때 */
input[type=text]:focus,
input[type=password]:focus {
color: red;
}
</style>7.2 UI 요소 상태 셀렉터(UI element states pseudo-classes)
pseudo-class Description
:checked 셀렉터가 체크 상태일 때
:enabled 셀렉터가 사용 가능한 상태일 때
:disabled 셀렉터가 사용 불가능한 상태일 때 <style>
/* input 요소가 사용 가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:enabled + span {
color: blue;
}
/* input 요소가 사용 불가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:disabled + span {
color: gray;
text-decoration: line-through;
}
/* input 요소가 체크 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:checked + span {
color: red;
}
</style>7.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)
pseudo-class Description
:first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
:last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다. <style>
/* p 요소 중에서 첫번째 자식을 선택 */
p:first-child { color: red; }
/* p 요소 중에서 마지막 자식을 선택 */
/* body 요소의 두번째 p 요소는 마지막 자식 요소가 아니다.
body 요소의 마지막 자식 요소는 div 요소이다. */
p:last-child { color: blue; }
</style>pseudo-class Description
:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n 번째 자식인 요소를 선택한다.
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n 번째 자식인 요소를 선택한다. <style>
/* ol 요소의 자식 요소인 li 요소 중에서 짝수번째 요소만을 선택 */
ol > li:nth-child(2n) { color: orange; }
/* ol 요소의 자식 요소인 li 요소 중에서 홀수번째 요소만을 선택 */
ol > li:nth-child(2n+1) { color: green; }
/* ol 요소의 자식 요소인 li 요소 중에서 첫번쨰 요소만을 선택 */
ol > li:first-child { color: red; }
/* ol 요소의 자식 요소인 li 요소 중에서 마지막 요소만을 선택 */
ol > li:last-child { color: blue; }
/* ol 요소의 자식 요소인 li 요소 중에서 4번째 요소 요소만을 선택 */
ol > li:nth-child(4) { background: brown; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 홀수번째 요소만을 선택 */
ul > :nth-last-child(2n+1) { color: red; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 짝수번째 요소만을 선택 */
ul > :nth-last-child(2n) { color: blue; }
</style>pseudo-class Description
:first-of-type 셀렉터에 해당하는 요소의 부모 요소 의 자식 요소 중 첫번째 등장하는 요 소를 선택한다.
:last-of-type 셀렉터에 해당하는 요소의 부모 요소 의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n) 셀렉터에 해당하는 요소의 부모 요소 의 자식 요소 중 앞에서 n번째에 등 장하는 요소를 선택한다.
:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모 요소 의 자식 요소 중 뒤에서 n번째에 등 장하는 요소를 선택한다. <style>
/* p 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 p 요소 */
p:first-of-type { color: red; }
/* p 요소의 부모 요소의 자식 요소 중 마지막 등장하는 p 요소 */
p:last-of-type { color: blue; }
/* p 요소의 부모 요소의 자식 요소 중 앞에서 2번째에 등장하는 p 요소 */
p:nth-of-type(2) { color: green; }
/* p 요소의 부모 요소의 자식 요소 중 뒤에서 2번째에 등장하는 p 요소 */
p:nth-last-of-type(2) { color: orange;}
/* p 요소 중에서 첫번째 자식을 선택 */
p:first-child { background: brown;}
</style>7.4 부정 셀렉터(Negation pseudo-class)
pseudo-class Description
:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택한다. <style>
/* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
input:not([type=password]) {
background: yellow;
}
</style>7.5 정합성 체크 셀렉터(validity pseudo-class)
pseudo-class Description
:valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터) 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다. <style>
input[type="text"]:valid {
background-color: greenyellow;
}
input[type="text"]:invalid {
background-color: red;
}
</style>8. 가상 요소 셀렉터 (Pseudo-Element Selector)
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다. 특정 부분이란 예를 들어 다음과 같다.
요소 콘텐츠의 첫글자 또는 첫줄
요소 콘텐츠의 앞 또는 뒤
가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
pseudo-element Description
::first-letter 콘텐츠의 첫글자를 선택한다.
::first-line 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.<style>
/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }
/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line { color: red; }
/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
content: " HTML!!! ";
color: blue;
}
/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
content: " CSS3!!!";
color: red;
}
/* 드래그한 콘텐츠를 선택한다 */
::selection {
color: red;
background: yellow;
}
</style>
BABY