[TIL] CSS Selector

CSS Selector

클래스와 아이디는 같아 보이지만 차이점이 존재한다.
1. 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다.
2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다.
👉 즉, 한 요소는 클래스는 여러개 가질 수 있고, 아이디는 하나만 가질 수 있다.

 

1. 태그 셀렉터 (Type Selector)

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

• css

li {
}

 

 

2. class 셀렉터 (Class Selector)

 

class 속성 값을 지정하여 일치하는 요소를 선택한다. class 속성값은 중복이 가능하다. 

• html

<p class="blue-text">Hello World!</p>

'.' 으로 해당 태그의 클래스의 이름으로 선택하는 것이 가능하다.

• css

.blue-text {
  color: blue;
  font-size: 10px;
}

 

 

3. id 셀렉터(ID Selector) 

id 속성값을 지정하여 일치하는 요소를 선택한다. id 속성값은 class 셀렉터 처럼 중복될 수 없는 유일한 값이다.

• html

<p id="my_text">Hello World!</p>

'#'으로 해당 태그의 아이디를 선택하는 것이 가능하다.

• css

#my_text{
  color: blue;
  font-size: 10px;
}

 

4. 어트리뷰트 셀렉터 (Attribute Selector)

패턴	descripttion
셀렉터[속성="값]	지정된 속성을 가지며 지정된 값과 어트리뷰트의 값이 일치하는 요소를 선택한다.

예를 들어 type이 text인 input들만 선택하고 싶을 때 

• html

<input type="text">

 

• css

input[type=text] {
	padding: 10px;
    font-size: 20px;
    border: 1px solid black;
    border-radius: 5px;
}

 

복합 셀렉터

1. 후손 셀렉터 (Descendant Combinator)

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

공백을 기준으로 셀렉터 A의 모든 후손 요소 중 셀렉터 B와 일치하는 모든 자손 요소를 선택하는 것이 가능하다. 

공백 다음에 tag 선택자, class 선택자, id선택자 등 자유롭게 사용이 가능하다.

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li {
  display : inline-block;
}

 

2. 자식 셀렉터 (Child Combinator)

패턴	descripttion
셀렉터A > 셀렉터B	셀렉터 A의 모든 후손 요소 중 셀렉터 B와 일치하는 요소를 선택한다.

직계 자손만 선택하는 것이 가능하다. 

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar>li {
  display : inline-block;
}

 

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

pseudo-classes	descripttion
:nth-child(n)	셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n)	셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.

여러 요소 중에 원하는 n번째 요소만 스타일을 주고 싶을 때 사용한다. 

 

• html

<table>
    <thead>
        <th>ITEM</th>
        <th>AMOUNT</th>
        <th>PRICE</th>
        <th>TOTAL</th>
    </thead>
 </table>

• css

table th:nth-child(2) {
	width: 400px;
    ...
}

table 태그 안에 있는 모든 th를 찾은 다음 2번째 나오는 th태그의 width를 400px로 설정한다. 

위와 같이 테이블에서 원하는 순서의 셀에 스타일을 줄 때 유용하게 사용할 수 있다.

 

 

다음과 같이 사용할 수도 있다.

(1) 짝수, 홀수로 등장하는 td에만 스타일 주기

• CSS

table th:nth-child(even) {
  color: red;
}

even은 짝수로 등장하는 th에만 스타일을 줄 수 있다.

odd를 쓰면 홀수로 등장하는 th에만 스타일을 준다.

 

(2)  3의 배수로 등장하는 3,6,9,12... 번째 등장하는 요소

• CSS

table th:nth-child(3n+0) {
	color:red;
}

3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있다. 

3n+1 이렇게 작성하면 (3의배수 + 1) 번째 등장하는 요소에만 스타일을 준다.

 

 

 

1. 가상 클래스 셀렉터 (pesudo-class Selector)

상태에 따라서 스타일을 줄 수 있는 pesudo class 는 선택자에 추가하는 키워드이다.

선택한 요소가 특별한 상태여야 만족할 수 있다.

예를 들어 :hover를 사용하면 포인터를 버튼에 올렸을 때만 사용 가능 하다.

 

• HTML

<button class="btn">결제하기</button>

• CSS

/* 버튼에 마우스 커서를 올릴 때 */
.btn:hover {
    background-color: chocolate;
}

button에 마우스 커서를 올리면 색상이 chocolate 색상으로 변경된다.

이 외에도 button에 해당되는 가상클래스가 많이 존재한다.

 

.btn:hover{
  background: chocolate; /*마우스를 올려놓을 때*/
  }
  
.btn:focus{
  background: red; /*클릭 후 계속 포커스 상태일 때*/
  }
  
.btn:active{
  background: brown; /*클릭 중일 때*/
  }

 

hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작합니다.

1. hover

2. focus

3. active

 

이 외에도 다양한 가상클래스가 존재한다. 

:any-link/*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing/*동영상, 음성이 재생중일 때*/
:paused/*동영상, 음성이 정지시*/
:autofill/*input의 자동채우기 스타일*/
:disabled/*disabled된 요소 스타일*/
:checked/*체크박스나 라디오버튼 체크되었을 때*/
:blank/*input이 비었을 때*/
:valid/*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid/*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required/*필수로 입력해야할 input의 스타일*/
:nth-child(n) /*n번째 자식 선택*/
:first-child/*첫째 자식 선택*/
:last-child/*마지막 자식 선택*/

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes - CSS: Cascading Style Sheets | MDN

 

a태그,  input태그에도 자주 사용한다.

input:focus {
  border: 2px solid red; /* 커서가 input에 있을 때 */
}

a:link{ 
  color: red; /*방문 전 링크*/
}

a:visited{ 
  color: black; /*방문 후 링크*/
}

 

 

 

우선 순위

예를 들어 id, class, tag가 동일한 태그에 존재할 때

 

• html

<p id="special" class="content">Front-end developer</p>

• css

.content {
    color: red;
}

p {
    color: green;
}

#special {
    text-align: center;
    color: blue;
}

style 속성 중 color가 겹친다. 이렇게 스타일이 겹칠 경우 우선순위에 따라 글자 색상이 결정이 된다.

 

 

우선순위

id > class > tag

우선 순위만큼 점수를 매긴다면 id는 100점으로 제일 높고, class는 10점, tag는 2점으로 가장 낮은 우선순위를 가진다.

따라서 위의 p태그 글씨의 색상은 id의 색상이 적용이되어 파란색이 된다.