[CSS] 선택자

스타일 시트(여러 스타일들을 묶어놓은 것)를 사용하여 꾸며준다

 

외부 스타일 시트 불러오기

<link rel="stylesheet" href="링크">

 

선택자

• 전체선택자, 타입선택자 등

//전체선택자 : 웹문서 전체 수정, 초기화하고 싶을때 사용
* {
    margin: 0; //바깥여백 제로
    padding: 0;
}

//태그선택자
p {
    color: blue; //p태그가 사용된 곳 전체를 스타일 적용하기
}

//class선택자. (다중선택)
.redtext {
    //클래스 선택자 이름 지정하기
    color: blue; //해당 클래스 내 문서에 적용
}

//id선택자. (중복없이)
#container {
    color: blue;
}

//그룹 선택자
h1, p {
    //h1,p부분 모두를
    color: blue; //이와같이 수정
}

//속성 선택자. 태그[]에 속성 넣어주면됨
a[target] {
    //a태그의 target모든것. 셀렉터(어트리뷰트)
}

 

반응 선택자

//링크셀렉터 // 링크들 서낵
a:link {...}

//셀렉터가 방문하지 않은 링크일때
:link

//셀렉터가 방문한 링크일때. 한번이라도 방문했던 사이트면 무조건 해당됨.
:visited

//셀렉터에 마우스가 올라와있을때
:hover

//셀렉터가 클릭된 상태일때
:active

//셀렉터에 포커스가 들어와있을때
:focus

 

구조 선택자

//p태그중에 최상위 태그 선택
p:root

//p태그중에 전체순서 중 n번째 태그 선택 (순서에 다른 태그 포함)
p:nth-child(n)

//p태그중에 전체순서 중 뒤에서부터 n번째 태그 선택 (순서에 다른 태그 포함)
p:nth-last-child(n)


//p태그중에 n번째 태그 선택 (순서에 p 태그만 포함)
p:nth-of-type(n)

//p태그중에 뒤에서 n번째 태그 선택 (순서에 p 태그만 포함)
p:nth-last-of-type(n)

//맨 첫번째 태그가 p태그인 경우 (순서에 다른 태그 포함)
p:first-child

//맨 마지막 태그가 p태그인 경우 (순서에 다른 태그 포함)
p:last-child


//p태그 중 첫번째 선택
p:first-of-type

//p태그 중 마지막번째 선택
p:last-of-type


//유일한 자식의 p태그 선택
p:only-child

//유일한 타입의 p태그 선택
p:only-of-type

//자식요소가 없는 p태그 선택
p:empty

 

 

상태 선택자

// 사용 가능한 form 관련 태그 선택 (기본)
:enabled

// 사용 불가능한 form 관련 태그 선택
:disabled

//현재 선택된 form 관련 태그
:checked

// 현재 초점이 맞추어진 form 관련 태그 선택. 입력을 하려고 하는 상태라거나의 예
:focus

 

 

기타 선택자

// lang 속성 값이 ko
p:lang(ko)

// S가 아닌 p 태그 선택
p:not(S)

// p의 url 요청시 선택
p:target

// p태그의 첫번째줄 선택
p::first-line

// p태그의 첫번째 문자 선택
p::first-letter

// p태그의 시작 지점 태그 선택
p::before

// p태그의 끝지점 태그 선택
p::after

// p태그 내의 드래그한 부분
p::selection

 

 

선택자 조합

// 선택자B가 포함된 선택자A 선택
A B

// 선택자A의 직계 자손인 선택자 B 선택
A > B

// 선택자A 바로 다음의 선택자B 선택
A + B

// 선택자A 다음에 있는것중 모든 선택자B에 해당하는것을 선택
A ~ B

// 선택자A와 선택자B 둘다 선택
A, B