combination selector
descendant selector- 모든 하위 요소에 스타일 적용
.부모 요소에 포함된 하위 요소 모두에 스타일 적용
.상위요소 하위요소{속성:속성 값;}
child selector - 자식 요소에만 스타일 적용
.상위요소 > 자식요소
.바로 아래 자식 요소에만 스타일 적용
adjacent selector - 가까운 형제 요소에 스타일 적용
.같은 부모 요소를 가지는 요소들을 형제 관계, 먼저나오는 요소 '형 요소', 나중에 나오는 요소 '동생 요소'
.요소1 + 요소 2, 요소 1 이후 맨 먼저 오는 요소 2에 스타일 적용
sibling selector - 형제 요소에 스타일 적용
.요소1 ~ 요소2
.요소 1 뒤에 오는 모든 요소 2 요소에 적용
속성 선택자
[속성] 선택자 - 지정한 속성에 스타일 적용
.a[href] { }
.<a> 태그 중 href 속성이 있는 요소만 스타일 적용
[속성=값] 선택자 - 특정 값을 갖는 속성에 스타일 적용
.a[target="_blank"]
[속성~=값] 선택자 - 여러 값 중 특정 값이 포함된 속성 스타일 적용
.[속성=값] 은 정확하게 일치하여야 하며, [속성~=값]은 속성 값이 여러 개일 때 특정 속성 값 찾음
.하이픈으로 연결되어 있거나 요소의 값이 일부만 일치할 때는 적용 안됨
[속성|=값] 선택자 - 특정 값이 포함된 속성에 스타일 적용
.하이픈으로 연결한 단어가 있어도 스타일 적용
[속성^=값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용
.요소의 값 일부만 일치해도 적용 가능
[속성$=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용
.확장자에서 보통 사용됨
[속성*=값] 선택자 - 값의 일부가 일치하는 속성에 스타일 적용
.어느 곳에 있든 해당 값이 포함되어 있으면 스타일 적용
가상 클래스
:link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용
.하이퍼링크 중 사용자가 아직 방문하지 않은 링크에 스타일 적용
.기본 blue 와 밑줄 표시됨
:visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용
.한 번 이상 방문한 링크에 대한 스타일 적용
.기본 purple 표시
:hover 가상 클래스 선택자 - 웹 요소에 마우스 커서 올려놓을 때 스타일 적용
.이미지 위 마우스 커서 올려놓으면 다른 이미지로 바뀌었다가 치우면 다시 돌아오는 rollover 만들수 있음
:active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용
.링크나 이미지 클릭했을 때 스타일 지정
:focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용
.아이디 입력하기 위에 필드에 커서 놓거나 tap 눌러 초점 이동했을 때 스타일 적용
:link, :visited, :hover, :active, 순서대로 정의해야 적용됨
:enabled, :disabled - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
.입력 창은 enabled, 약관 등 보여 줄 때는 disabled
:checked - 라이도 박스나 체크 박스에서 해당 항목을 선택했을 떄 스타일 지정
:root - 문서 전체에 적용
.<html>요소에 스타일 적용
:nth-child(n), :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용
.여러 개의 항목이 나열된 경우, 몇 번째을 특정으로 스타일 적용
.주로 메뉴 항목에서 사용
.nth-child(n) : 앞에서 부터 n 번째 자식 요소에 스타일 적용, odd:홀수 even : 짝수
.nth-last-child(n) : 뒤에서부터 n 번째 자식 요소
.다 같은 레벨 요소여야 하며, an+b 수식도 가능
:nth-of-type(n), :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용
:first-child, :last-child - 첫 번째, 마지막 요소에 스타일 적용
:first-of-type, :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용
.같은 레벨의 같은 요소 중 첫 번째와 마지막 요소에 적용
:only-child, only-of-type - 하나뿐인 자식 요소에 스타일 적용
.only-child : 자식 요소가 오직 한개 뿐일 때
.only-of-type : 자식 요소가 여럿이나 특정 요소가 하나일 때
:target - 앵커 목적지에 스타일 적용
.같은 문서 안에서 다른 위치로 이동할 때 anchor 이용
:not - 특정 요소가 아닐 때 스타일 적용
.p:not(#ex){}
가상 요소
::first-line, ::first-letter - 첫번째 줄, 첫번 째 글자에 스타일 적용
::before, ::after - 내용의 앞뒤에 콘텐츠 추가
'소프트웨어 > HTML+CSS' 카테고리의 다른 글
| HTML+CSS 반응형 웹 (마지막 이야기) (0) | 2020.02.04 |
|---|---|
| CSS 7번째 - 애니메이션 (0) | 2020.01.30 |
| CSS 5번째 - CSS 포지셔닝 (0) | 2020.01.17 |
| CSS 4번째 - 레이아웃 스타일 (0) | 2020.01.16 |
| CSS 3번째 - 색상/배경 스타일 (0) | 2020.01.15 |
