P-Language/CSS

Selector

hannah_tianlan 2020. 4. 20. 12:54

Style을 적용하고자 하는 HTML요소를 특정. 선택된 요소에 스타일을 정의.

h1 { color: red; }
p {color : blue; }

복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표 로 구분.

h1, p {color : red; }

 

1. 전체 셀렉터 Universal Selector

* { color : red; }

HTML 문서 내의 모든 요소를 선택한다. html요소를 포함한 모든 요소가 선택된다 (head 요소도 포함됨)

 

 

2. 태그 셀렉터 Type Selector

p { color : blue; }

지정된 태그명을 가지는 요소를 선택.

 

3. ID 셀렉터 ID Selector

<style>
#p1 { color: blue; }
</style>
.
.
.
<p id="p1"> paragraph 1 </p>

#id 어트리뷰트 값을 지정하여 일치하는 요소를 선택. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.

 

4. 클래스 셀렉터 Class Selector

.class 어트뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다. 재사용의 측면에서 유용함.

 

5. 어트리뷰트 셀렉터 Attribute Selector

 

a[href] { color : red; }

a 요소중에 herf 어트리뷰트를 갖는 모든 요소를 선택함.

 

  • 셀렉터[어트리뷰트], 지정된 어트리뷰트를 갖는 모든 요소를 선택.
  • 셀렉터[어트리뷰트="값"] , 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택.
  • 셀렉터[어트리뷰트~="값"], 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함하는 요소를 선택.
  • 셀렉터[어트리뷰트|="값"], 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈("값~")으로 시작하는 요소를 선택.
  • 셀렉터[어트리뷰트^="값"], 지정된 어트리뷰트 값으로 시작하는 요소를 선택.
  • 셀렉터[어트리뷰트$="값"], 지정된 어트리뷰트 값으로 끝나는 요소를 선택.
  • 셀렉터[어트리뷰트*="값"], 지정된 어트리뷰트 값을 포함하는 요소를 선택.

 

6. 복합 셀렉터 Combinator

6.1 후손 셀렉터 Descendant Combinator

  • 부모 요소 : 자신의 1 level 상위에 속하는 요소
  • 자손 요소(자식 요소) : 1 level 하위에 속하는 요소
  • 후손 요소(하위 요소) : n level 하위에 속하는 요소 

후손 셀렉터는 셀렉터A의 모든 후손(하위) 요소 중 셀렉터 B와 일치하는 요소를 선택한다.

div p { color: orange; }

div 요소의 후손요소 중 p 요소

 

6.2 자식 셀렉터 Child Combinator : 셀렉터 A의 모든 자식 요소 중 셀렉터 B 와 일치하는 요소를 선택.

div > p { color: orange; }

div 요소의 자식요소 중 p 요소

 

6.3 형제(동위)셀렉터 Sibling Combinator

형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용함.

- 일반 형제 결합자 : 두개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할때 선택. 두 요소가 서로 붙어있을 필요는 없다.

img ~ p {
    color : red;
}

 

 

- 인접 형제 결합자 : 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택.

img + p {
    font-weight : bold;
}

 

7. 가상 클래스 셀렉터 Pseudo-Class Selector

요소의 특정 상태에 따라 스타일을 정의할 때 사용. 

  • 마우스가 올라와 있을 때
  • 링크를 방문했을 때, 아직 방문하지 않았을 때
  • 포커스가 들어와 있을 때

원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법.

콜론(;)을 사용.

 

selector:pesudo-class{
    property: value;
}
/* a 요소가 hover(마우스가 올라와 있을 때) 상태일 때 */
a:hover { color : red; }

/* input 요소가 focus 상태일때 */
input:focus { background-color : blue; }

 

7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터 (User action pseudo-classes)

  • link : 셀렉터가 방문하지 않은 링크 일 때
  • visited : 셀렉터가 방문한 링크일 때
  • hover : 셀렉터에 마우스가 올라와 있을 때
  • active : 셀렉터가 클릭된 상태일 때
  • focus : 셀렉터에 포커스가 들어와 있을 때

7.2 UI 요소 상태 셀렉터 UI element states pseudo-classes

  • checked : 셀렉터가 체크 상태일 때
  • enabled : 셀렉터가 사용 가능한 상태일 때
  • disabled : 셀렉터가 사용 불가능한 상태일 때

7.3 구조 가상 클래스 셀렉터 Structural pseudo-classes

  • first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택.
  • last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택.
  • nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택.(n은 0부터 시작)
  • nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택.
  • first-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택.
  • last-of-type: 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택.
  • nth-of-type:셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 n번째 등장하는 요소를 선택.
  • nth-last-of-type:셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째 등장하는 요소를 선택.

 

7.4 부종 셀렉터 Negation pseudo-class

   not : 셀렉터에 해당하지 않는 모든 요소를 선택함.

 

7.5 정합성 체크 셀렉터 Validity pseudo-class

  • valid selector : 정합성 검증이 성공한 input 요소 또는 form 요소를 선택.
  • invalid selector : 정합성 검증이 실패한 input 요소 또는 form 요소를 선택.

8. 가상 요소 셀렉터 Pseudo-Element-Selector

요소의 특정 부분에 스타일을 적용하기 위하여 사용. 

  • 요소 콘텐츠의 첫글자 또는 첫줄
  • 요소 콘텐츠의 앞 또는 뒤

두개의 콜론을 사용 (::)

  • ::frist-letter : 콘텐츠의 첫글자를 선택.
  • ::first-line : 콘텐츠의 첫줄을 선택. 블록 요소에만 적용할 수 있다.
  • ::after : 콘텐츠의 뒤에 위치하는 공간을 선택. 
  • ::before : 콘텐츠의 앞에 위치하는 공간을 선택.
  • ::selection : 드래그한 콘텐츠를 선택.