본문 바로가기
Publishing/CSS3

CSS Type 선택자

by 오다다의 이상한 코드 odada 2020. 2. 14.

CSS 선택하기

요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다.

 

CSS 엘리먼트 선택

요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다.

p {
  text-align: center;
  color: red;
}

 

CSS id 선택기

id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.

요소의 id는 페이지 내에서 고유하므로 id 선택기는 하나의 고유 한 요소를 선택하는 데 사용됩니다!

특정 ID를 가진 요소를 선택하려면 해시 (#) 문자와 요소의 ID를 차례로 쓰십시오.

#para1 {
  text-align: center;
  color: red;
}
아이디 이름은 숫자로 시작할 수 없습니다!

 

CSS 클래스 선택기

클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택합니다.

특정 클래스를 가진 요소를 선택하려면 마침표 (.) 문자와 클래스 이름을 차례로 쓰십시오.

.center {
  text-align: center;
  color: red;
}

특정 HTML 요소 만 클래스의 영향을 받도록 지정할 수도 있습니다.

p.center {
  text-align: center;
  color: red;
}

HTML 요소는 둘 이상의 클래스를 참조 할 수도 있습니다.

<p class="center large">This paragraph refers to two classes.</p>
클래스 이름은 숫자로 시작할 수 없습니다!

 

CSS 전체 선택기

전체 선택기는 페이지의 모든 요소를 가리키는 선택자로 '*'로 표시합니다.

* {
  text-align: center;
  color: red;
}

 

CSS 하위 선택기

하위 선택기는 요소 내부에 있는 모든 해당 요소를 가르키며, 선택자 사이를 공백으로 분리합니다.

.box p {
  text-align: center;
  color: red;
}

 

CSS 자식 선택기

자식 선택기는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 '>'으로 분리합니다.

.box > p {
  text-align: center;
  color: red;
}

 

CSS 인접 선택기

인접 선택기는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 '+'로 분리합니다.

h1 + p {
  text-align: center;
  color: red;
}

 

CSS 그룹화 선택기

그룹화 선택기는 동일한 스타일 정의를 가진 모든 HTML 요소를 선택합니다.

h1, h2, p {
  text-align: center;
  color: red;
}

 

모든 CSS 단순 선택기

.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements

 

https://www.w3schools.com/css/css_selectors.asp

 

CSS Selectors

CSS Selectors CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: This page will explain the most basic CSS selectors. The CSS element Selector The element select

www.w3schools.com

'Publishing > CSS3' 카테고리의 다른 글

CSS Web font  (0) 2020.02.20
CSS Fonts  (0) 2020.02.18
가상 선택자  (0) 2020.02.17
CSS 속성(Attribute) 선택자  (0) 2020.02.14
CSS Type 선택자  (0) 2020.02.14
CSS 사용법  (0) 2020.02.14

댓글0