ch2 - 3. 다양한 Selector 사용법

Index

Index 1. selector를 하나만 사용하는 경우 1.1 전체 선택자 1.2 태그 선택자 1.3 클래스 선택자 1.4 ID 선택자 2. selector를 여러 개 사용하는 경우 2.1 하위 선택자 2.2 자식 선택자 2.3 인접 형제 선택자 2.4 일반 형제 선택자 3. 속성 selector 3.1 태그[속성이름]3.2 태그[속성이름="변수"]3.3 태그[속성이름~="변수"]3.4 태그[속성^="변수"]3.5 태그[속성$="변수"]3.6 태그[속성*="변수"]3.7 태그[속성|="변수"]

1. selector를 하나만 사용하는 경우

1.1 전체 선택자

전체 선택자를 통해서 모든 HTML 요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다. 전체 선택자는 * 을 사용하여 나타냅니다.


* {
    margin: 0 auto;
}

1.2 태그 선택자

태그 선택자는 태그 이름 을 사용하여 나타냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.


p {
    color: red;
}

1.3 클래스 선택자

클래스 선택자는 .클래스 이름 을 사용하여 나타냅니다. 태그 선택자와 마찬가지로 클래스가 클래스 이름과 같은 태그에 속성을 적용합니다.


.ClassName {
    width: 100px;
}

1.4 ID 선택자

ID 선택자는 #아이디 이름 을 사용하여 나타냅니다. 위와 동일하게 id 가 id 이름과 같은 태그에 속성을 적용합니다.


#IdName {
    position: fixed;
}

2. selector를 여러 개 사용하는 경우

선택자를 여러 개 쓰는 경우를 복합 선택자라고 합니다. 복합 선택자에도 여러 가지 종류가 있어 이에 대해서 알아보겠습니다.

2.1 하위 선택자

하위 선택자는 선택자 사이를 공백을 사용하여 나타냅니다. 앞 요소의 자손인 뒤 요소를 선택합니다.


section ul {
    text-shadow: none;
}

2.2 자식 선택자

하위 선택자는 선택자 사이를 > 를 사용하여 나타냅니다. 앞 요소의 자식 인 뒤 요소를 선택합니다.


section > ul {
    text-shadow: none;
}

자손은 자식 을 포괄하는 의미입니다. 자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 하위 요소에만 적용합니다.

2.3 인접 형제 선택자

인접 형제 선택자는 선택자 사이를 + 를 사용하여 나타냅니다. + 를 기준으로 앞 요소 직후에 나오는 뒤 요소를 선택합니다.


h1 + ul {
    color: red;
}

2.4 일반 형제 선택자

일반 형제 선택자는 선택자 사이에 ~ 를 사용하여 나타냅니다. ~ 을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택합니다.


h1 ~ ul {
    color: red;
}

형제 선택자는 같은 부모를 가지는 요소들을 말합니다.

3. 속성 selector

태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근할 수 있습니다. 이를 속성 선택자 라고 합니다.

3.1 태그[속성이름]

속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다.


a[href] {
	font-size: 10px;
}

3.2 태그[속성이름="변수"]

속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다.


a[href="http://www.naver.com"] {
    color: black;
}

3.3 태그[속성이름~="변수"]

속성이름 의 속성값이 변수 를 포함하는 태그를 선택합니다.


a[href~="naver"] {
    color: black;
}

3.4 태그[속성^="변수"]

속성 의 속성값이 변수 로 시작하는 태그를 선택합니다.


a[href^="http"] {
    color: black;
}

3.5 태그[속성$="변수"]

속성 의 속성값이 변수 로 끝나는 요소를 선택합니다.


a[href$="com"]{
    color: black;
}

3.6 **태그[속성*="변수"]**

속성 의 속성값이 변수 를 포함하는 태그를 선택합니다.


a[href*="naver"] {
	  color: black;
}

태그[속성~="변수"] 와 태그[속성*="변수"] 의 차이는 무엇인가요?

~= 는 단어를 기준으로 *= 는 문자열을 기준으로 판단을 하게 됩니다. 예를 들어서 위와 같은 상황에서 navers 를 어떻게 인식할까요? ~= 은 단어를 기준으로 naver 와 navers 를 다르다고 인식하고 선택을 못하게 되고 *= 은 문자열을 기준으로 navers 안에 naver가 포함되기 때문에 선택을 합니다.

3.7 태그[속성|="변수"]

속성 의 속성값이 변수 이거나 변수 로 시작하는 태그를 선택합니다.


a[href|="http"]{
    color: black;
}