CSS Selector(1)

CSS Selector 종류의 다양성

 
CSS는 특정 UI부분을 디자인할 때 표현할 대상을 지정할 때 선택 자라는 걸 사용한다.
 

CSS선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 형제선택자, 그룹선택자, 속성선택자, 가상 클래스 선택자, 가상 요소 선택자, 종속 선택자가 있다. 이 많은 선택자 종류에서도 선택자의 우선순위도 있다.(마치 계산할 때 먼저 계산해야 할 부분이 있는 것처럼)

 

 

 

---

 

 

 

기본적인 CSS 선택자
 

 

• Type 선택자

 

선택지 중 가장 많이 사용되고 간단한 선택자이다. 
HTML문서에서 특정 태그를 선택하고 싶으면 그 태그를 적기만 하면 된다.
 

p{
    background-color: pink;
}

type선택자를 통한 css적용

 
이처럼 p태그를 꾸미고 싶으면 쉽게 선택자로 p만 적고 css를 작성하면 된다.
 
 

---

 
 
 

• Id, Class 선택자

  HTML 작성하다 보면 같은 태그를 사용할 수밖에 없다. 같은 태그라도 다른 기능과 다른 역할을 하는데 다른 기능을 부여하기 위해 다른 이름으로 지정하여 따로 속성을 부여할 수 있다.

  예를 들어, HTML 태그에 id이름을 붙여 이름을 부여한 태그에 css로 디자인하고 싶으면 
css에서는 id선택자 이름 앞에 '#'을 붙이면 된다.

  id 뿐만 아니라 class로 공통적인 역할을 지닌 같은 태그를 class로 묶고 그 묶은 태그들을 디자인하고 싶으면 class선택자 이름 앞에 '.'을 붙이면 된다. 
 

<h2>ID,CLASS</h2>
<p id="paragraphID">This area backgroundColor is yellow.</p>
<p class="paragraphClass">This area backgroundColor is red.</p>

 

#paragraphID{
    background-color: yellow;
}

.paragraphClass{
    background-color: red;
}

 

Id,Class 선택자를 사용한 CSS 적용

 
 
 

---

 
 
 

• 전체 선택자

  HTML 페이지의 모든 요소를 가리키는 선택자 '*'이다.
  전체 선택자는 id, class 값을 지닌 태그도 속성이 부여된다. 물론 id, class 선택자로 부여한 속성을 무시한다는 것은 아니다.
 
 

*{
    color: yellowgreen;
}

<h2>Type 선택자</h2>
<p>
	This area backgroundColor is pink.
</p> 
<h2>ID,CLASS</h2>
<p id="paragraphID">This area backgroundColor is yellow.</p>
<p class="paragraphClass">This area backgroundColor is red.</p>

 

'*' 전체 선택자로 적용된 이미지

 
 
 

---

 
 
 

CSS Combinators

 

이번에는 CSS 결합자에 대해 알아보겠다.

 

 

 

 

 

• 후손 결합자

일반적으로 (" ") 공백을 기준으로 상위태그" "하위태그 이런 식으로 결합해 선택자에 사용한다.

 

 
 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.

 

 

 

 

 

 

위 코드팬 예시처럼 CSS코드를 보면 상위태그 " " 적용하고 싶은 하위태그맨 마지막에 지정한다.

 

 

 

---

 

 

 

• 자식결합자

자식 선택자는 ">" 기호를 사용해 선택자를 지정한다.

 

첫 번째와 일치하는 요소의 직계 자식인 두 번째 선택자와 일치하는 요소

 

예시를 보면 더 쉬울 것이다. 직계 자식을 선택하는 결합자인 것이다.

 

 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.

 

 

 

예시처럼 ul 바로 직계자식인 li태그 단 2개만 css가 적용되었다.

 

 

 

---

 

 

• 인접 형제 결합자

 

인접 형제 결합자("+")를 사용한다.

 

첫 번째로 선택자의 바로 뒤에 오는 두 번째 선택자 (형제관계)

두 번째 선택자가 첫 번째 선택자의 형제관계에다가 바로 뒤에 오면 적용된다.

 

이것도 예시를 보면 쉽다.

 

 

 

 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.

 

 

 

위처럼 첫 번째 선택자"+"두 번째 선택자는 첫 번째 선택자의 바로 뒤에 오는 형제 선택자만 선택하는 결합자이다.

 

 

 

---

 

 

 

• 일반 형제 결합자

 

일반 형제 결합자는 "~"를 사용한다.

두 번째 선택자의 요소와 첫 번째 선택자의 요소의 부모 요소가 같고, 뒤쪽 선택자가 뒤에 있을 때 선택한다.

 

즉, 첫 번째와 두 번째 모두 부모가 같고 뒤쪽 선택자가 첫 번째보다 뒤에 존재해야 한다.

위 조건이 맞아떨어지면 두 번째를 선택해 스타일을 지정할 수 있다.

 

 

 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.

 

h2~p {
	color: red;
}

span~strong {
	border: 1px solid black;
}

 

h2와 p가 형제이며 h2기준 뒤에 오는 p태그 지정

 

span태그와 strong태그의 형제이며 span기준 뒤에 오는 strong태그 지정

 

 

 

---

 

 

 

 

 

• 그룹 선택자

 

그룹 선택자는 ","을 사용

여러 선택자들을 함께 묶어 속성 부여.

 

 

 

 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.

 

 

이처럼 그룹을 만들어서 선택할 수 있다. 

p, li, a처럼 3개를 그룹을 만들어서 속성을 부여할 수 있다.

 

 

 

 

 

 

이처럼 기본적인 선택자와, id선택, class선택, *선택, 후손결합, 자식결합, 인접 형제 결합, 일반 형제 결합, 그룹 결합을 배웠다.

 

다음에는 또 다른 선택자에 대해 정리하겠다.

 

---

• reference

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

https://coding23213.tistory.com/15

CSS의 선택자(selector) 종류 14가지