css 선택자, 선택자 종류와 사용법

 

 

css 선택자, 선택자 종류와 사용법

 

 

오늘 정리하는 부분도 css 기초로, 가장 초반에  배웠어야 할 부분인데

 

정리가 상당히 늦은 감이 있네요.^^

 

css 선택자 종류(대표적으로, 타입 선택자, id 선택자, class 선택자)와 선택자 사용 방법까지

 

알아 볼게요. 너무 간략히 정리한 부분은 다음에 또 자세히 다루어 볼게요~

 

CSS 구문은 다음과 같습니다.

 

선택자 { 속성 : 속성값 ; }   selector { property : value ; }

 

여기서, 선택자란 무엇일까요?

 

무언가에 스타일을 주고자 할 때 대상을 지정해야 하는데, 이걸 선택자라고 합니다.

 

 

선택자의 종류

 

 

유형 선택자(type selector) : 요소 이름

 

예: p {color: red}

p 요소가 있는 곳은 모두 빨간색 글씨로 지정하겠다는 뜻

 

전체 선택자(universal selector) 문서에서 모든 요소에 적용. * 기호를 사용.

 

예: *{margin: 0px; padding: 0px;}

 

모든 요소에 margin 0px, padding 0px를 지정하겠다는 뜻

 

 

ID 선택자(id selector): 구체적 id를 지닌 한 요소

 

예 : #header{text-align: center;}

header라는 id(고유 이름)을 지닌 곳에 가운데로 정렬하겠다는 의미

 

클래스 선택자(class selector): 많은 요소에 스타일을 한꺼번에 지정하고자 할 때 class로 지정된 요소

예: .popup{font-size: 11px;}

popup이란 이름을 지닌 곳에는 모두 글꼴 크기를 11px로 하겠다는 의미

 

class, id 선택자

 

 

 

 

자식 선택자(child selector)

 

요소가 어떤 요소의 자식일 때 적용

 

자식 선택자는 기호 >로 분리하며,  둘 이상의 선택자로 구성 됨.

 

예:
body > P { line-height: 1.3 }

 

body의 직계 자식인 모든 p요소에 적용(직계 이후에 오는 자손은 포함하지 않음)

 

자손 선택자(descendant selector)또는 문맥 선택자(contextual selector)

요소 내부에 있는 자손 요소들에 적용. 공백(space)으로 분리.

 

자식과 자손의 차이는?

 

자식: 부모 안에 있는 자식 요소에만 영향을 미침

자손: 부모 안에 있는 모든 자손에 영향을 미침(자식, 손자 등)

 

 

예:

ul li a{text-decoration: none;}

 

 

예2: div ol>li p

 

예2는, 자손 선택자와 자식 선택자를 조합한 것인데

 

div 자손인 ol 이어야 하며, li는 이  ol의 자식이어야 하며, p는 li의 자손임.

 

 

 

인접 형제 선택자 (Adjacent sibling selector)

 

구문 : E1 + E2(E2는 선택자의 대상임)

E1과 E2가 문서 구조에서 같은 부모를 가지고, E1 바로 뒤에 E2가 와야 함.

 

예:

h1 + h2 {text-indent : 5px; }  

h1.opener + h2 { margin-top: -5mm }  

 

 

속성 선택자(attribute selector)

 

구체적 속성을 지닌 요소에 적용

 

속성 선택자 4가지

 

[attribute]

요소가 어떤 속성을 지닐 때 적용(속성값이 무엇이든 상관 없음)

 

예: a[title] {color: blue;}

title 속성이 있는 a 태그에 적용

[attribute=value]

요소가 구체적 속성값을 지닌 속성을 가질 때 적용

 

예: a[href=http://www.naver.com/] { font-weight : bold ; }

 

[attribute~=value]

 

요소의 속성값이  공백으로 분리된 특정 단어일 때  적용

 

예: a[title~=web] { background-color : yellow ; }

 

 

[attribute|=value]

요소의 속성값이 특정 단어로 시작하며 하이픈으로 분리될 때

 

예: [lang|=fr] { background-color : grey ; }

 

 

의사 클래스 선택자 (pseudo-class selector)

 

스타일은 보통 문서 트리 구조의 위치에 기반하고 있는데

어떠한 요소도 문단의 첫번째 줄을 참조하지 못함.

하지만 css 의사 클래스와 의사 요소를 사용하면 다양한 스타일 적용이 가능함.

(첫번째 줄에만 스타일을 준다던지)

 

의사 클래스 선택자 종류

 

:link 방문전 링크
:visited 방문후 링크
:active 클릭할 때 링크 상태

:first-child 요소의 첫번째 자식을 호출함.
:focus 요소가 포커스될 때(키보드 입력이나 문자 입력 양식에서)
:hover 요소에 마우스를 올렸을 때
:lang 문서의 언어에

  

a: link, a: visited, a: active, a: hover 사용법 자세히 알기

 

 

의사 요소 선택자(pseudo-element selector)

 

내용을 배열하는 선택자.

 

:first-line 문단의 첫번째 줄에 적용(블록 레벨 요소에만 적용)
:first-letter (블록 요소의 첫번째 줄의 첫번째 문자 선택)
:before 요소의 내용 앞에 내용을 생성(content 속성과 함께 사용)
:after 요소의 내용 뒤에 내용을 생성(content 속성과 함께 사용)

예: p:first-letter { font-size : 2.5em ; }
     li:after { content : ";" ; }

 

 

*css3의 의사 클래스, 의사 요소는 포함하지 않았습니다*

 

선택자를 묶는 방법

 

,(쉼표)로 분리

예: p, div {color: red;}

 

위 코드는 다음과 같은 말

 

p{color: red;}

div{color: red;}

 

다른 선택자들을 조합하여 묶을 수도 있음

예: p, .red, #sub, div a:link {color: red;}

 

space(공백)으로 분리

부모 요소 안에 모든 자손 요소를 대상으로 스타일을 적용

 

예: ul li{text-decoration: none;}

 

 

 > 로 분리

 

부모 요소 바로 뒤의 자식 요소에 스타일을 적용(자식 요소 이하를 포함하지 않음)

 

예: body > P { line-height: 1.3 }

 

+ 로 분리

 

문서 구조에서 같은 부모를 가지고, 형제 요소 바로 뒤에 오는 요소에 적용.

 

예: h1 + h2 {text-indent : 5px; }  

  

 

 css 선택자 종류 요약표

 

 

더 자세하게 알고 싶으신 분은 아래 링크로 들어가시면 됩니다.

https://aboooks.tistory.com/323

 

[참조 사이트]

 

http://www.w3.org/TR/CSS2/selector.html#selector-syntax

http://webdesign.about.com/od/cssselectors/qt/cssselpseudoele.htm

 

 

스타일 적용 우선 순위와 속성 강제 적용 !important

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)