CSS - 선택자(기본, 복합 , 가상클래스, 가상 요소, 속성)

 

 

1) CSS

- HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.

 

2) CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용할 수 있다.

- 선택자(selector) : rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택한다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꾸면 된다. 

 

1. 기본 선택자

- CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector)이다. 타입 선택자를 사용하면 HTML 문서에서 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있다.

① id : <p id="userName">홍길동</p> /*웹페이지 문서 내에 id는 중복 불가*/

② class : <div class="user-list-cont">유저정보 영역</div> /*웹페이지 문서 내에 class는 중복 가능*/

 

2. 복합 선택자

① 일치선택자:: > 조건을 만족해야 선택이 된다. 선택자가 span.orange인 경우에는 태그가 <span>이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다.

② 자식선택자:: > 자식 요소를 선택한다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용된다. 아래 코드는 ul 코드의 자식들(li) 중 orange 클래스를 갖고 있는 선택자만 선택한다.

③ 후손(하위) 선택자:: > 후손 요소를 선택한다. ( E F ) :: '띄어쓰기'가 선택자의 기호로 사용된다. div 코드 안에 있는 모든 태그들 중 orange 클래스를 갖고 있는 모든 선택자를 선택한다.

 

 

ul li.custom-class {color:red;} /* 복합클래스 */

body div p {font-size:20px;} /* 자손선택자 */

body > div > p{font-size:50px;} /* 자식선택자 */

h1 + div {color:red;} /* 인접형제 선택자 + */

h2 ~ div {color:red;} /* 일반형제 선택자 + */

 

3. 가상클래스 선택자

- 콜론(:) 기호가 한 개 붙어있는 상태이다. (콜론이 두 개(::)가 붙어있는 건 가상 요소 선택자이다.

① hover:: > E에 마우스(포인터)가 올라가 있는 동안에만 E를 선택한다. (E:hover)

② active:: > E를 마우스로 클릭하는 동안에만 E를 선택 한다. (E:active)

③ focus:: > E가 포커스 된 동안에만 E를 선택 한다. (E:focus) 대화형 콘텐츠(input, img, tabindex가 부여된 요소)에서 사용이 가능하다.

 

4. 가상 요소 선택자

- css를 통해서 html에 가상의 요소를 생성해서 제공할 수 있다.

① before:: > E요소 내부의 앞에, 내용(content)을 삽입한다. (E::before)

② after:: > E요소 내부의 뒤에, 내용(content)을 삽입한다. (E::after)

5. 속성 선택자

- 기본 문법은 요소[속성명]이다. 이 경우 속성의 값은 상관없이 해당 속성을 가지고 있는 요소가 선택된다. 예를 들어 p[class] 라고 쓰면 class 값과 상관없이 class 속성을 가진 p 요소가 모두 선택된다.

① attr : 속성 attr을 포함한 요소를 선택한다. [attr]

② attr=value : 속성 attr을 포함하며 속성 값이 value인 요소를 선택한다. [attr=value]

③ attr^=value : 속성 attr을 포함하며 속성 값이 value로 시작하는 요소를 선택 한다. [attr^=value]

④ attr$=value : 속성 attr을 포함하며 속성 값이 value로 끝나는 요소를 선택 한다. [attr$=value]