[CSS] Selector 선택자

- 태그 선택자

태그명 { 속성: 속성값; }

 

- id 선택자

#id명 { 속성: 속성값; }

- class 선택자

.class명 { 속성: 속성값; }

 

- 부모 자식 선택자

선택자1 > 선택자2 {
    속성: 속성값;
}

// 선택자1이 부모 element, 선택자2가 자식 element
// 부모 태그 하위에 있는 선택자2에 해당하는 모든 자식 태그에 스타일을 적용

 

- 자손 선택자

선택자1 선택자2 {
    속성: 속성값;
}
// 선택자1 이 부모 element, 선택자2가 자손 element
// 부모 태그 하위에 있는 선택자2에 해당하는 모든 자손 태그에 스타일을 적용

• 어떤 태그의 모든 하위 태그에 적용하고 싶으면 자손 선택자를,
• 어떤 태그의 자식 태그에만 적용하고 싶으면 자식 선택자를 사용

- 다중 조건 선택자

논리 연산자 and

선택자1선택자2 {
    속성: 속성값;
}
// 선택자끼리 띄어쓰기 없이 붙여서 쓰면 and와 같습니다
// 선택자1과 선택자2를 모두 만족하는 엘리먼트들에게 해당 style을 적용

태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }

 

 

논리 연산자 or

선택자1, 선택자2 {
    속성: 속성값;
}

// 선택자끼리 쉼표로 구분
// 선택자1과 선택자2 중 어느 하나라도 만족하는 엘리먼트들에게 해당 style을 적용

#아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 
태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; }

 

CSS 적용의 우선순위

1. 속성 값 뒤에 !important를 붙인 속성
2. HTML의 각 태그에서 style을 직접 지정한 속성
3. id selector
4. class selector
5. tag selector
6. 상위 객체에 의해 상속된 속성

결합자와 구분자

• +( 다음 형제 결합자 ) : +는 두 개의 선택자를 분리하고 첫 번째 요소 바로 뒤에 있고 둘 다 동일한 부모의 자식인 경우에만 두 번째 요소와 일치 ,앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택

 

• >( 하위 결합자 ) : 자식 연결자 ( >)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째 선택기와 일치하는 요소의 직계 하위 요소인 두 번째 선택기와 일치하는 요소만 일치

• ||( 열 조합자 ) : 열 연결자 ( ||)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째 선택기와 일치하는 열 요소에 속하는 두 번째 선택기와 일치하는 요소만 일치
• ~( 후속 형제 결합자 ): ( ~, 물결표)는 두 개의 선택기를 분리하고 첫 번째 요소(반드시 바로는 아님) 뒤에 오는 두 번째 요소의 모든 인스턴스 와 일치하며 동일한 상위 요소를 공유

• " "( 하위 결합자 ) : 일반적으로 단일 공백(" ") 문자로 표시되는 하위 조합자는 두 개의 선택기를 결합하여 두 번째 선택기와 일치하는 요소에 일치하는 조상(부모, 부모의 부모, 부모의 부모의 부모 등) 요소가 있는 경우 두 번째 선택기와 일치하는 요소가 선택
• |( 네임스페이스 구분 기호 ) : 네임 스페이스 구분 기호 ( |)는 선택기를 네임스페이스에서 분리하여 유형 선택기에 대한 네임스페이스 또는 네임스페이스 부족을 식별

 

:not()

• 부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법
• 인수로 표시되지 않은 요소와 일치
• X는 다른 부정 선택자를 포함해서는 안 됩니다.

:first-child

• CSS :first-child 의사 클래스는 형제 요소 중 제일 첫 요소

nth-child() 

• CSS :nth-child() : 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

 

- 특성 선택자 : 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택

[attr]
attr이라는 이름의 특성을 가진 요소를 선택합니다.
[attr=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
[attr~=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
[attr|=value]
attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
[attr^=value]
attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr$=value]
attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr*=value]
attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.

 

:enabled

• CSS :enabled 의사 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재