CSS 선택자와 결합자

치코리타·2024년 1월 3일

HTML/CSS

목록 보기
9/21
post-thumbnail

선택자
HTML의 어떤 요소를 선택하여 적용할 것인가?를 정하는 부분
같은 선택자일 경우에는 뒤에 오는 것이 우선순위가 높다.

1. *을 붙여 모든 요소를 선택할 수 있다.

* {
  color: orange;
}

2. 태그를 선택할 수도 있다.

p {
  color: orange;
}

3. .에다가class이름을 붙여 class를 선택할 수 있다.

.chiko { /*.을붙여 클래스임을 나타낸다. chiko클래스의 색상을 변경*/
  color: red;
}

4. #을 붙여 id를 선택할 수 있다.

#fire {
  color: red;
}

5. ,(쉼표)를 통해서 or처럼 선택할 수도 있다. 

/* p태그를 가졌거나, chiko클래스이거나, id가 grass인 요소 선택 */
p, .chiko, #grass {
	color: green
}

6. 이 외에도 여러개가 합쳐진 것을 선택할 수도 있다 밑에 결합자를 통해 알아보자.

그럼 선택자의 우선 순위는 뭐가 가장 높을까?

<body>
  <p>치코리타1</p>
  <p class="chiko "id="name">치코리타2</p>
  <p class="chiko">치코리타3</p>
</body>
*{
  color:blue;
}

#name{
  color:green
}

.chiko{
  color:red;
}

p{
  color:pink;
}

결과

1. id 2. class 3. 태그 4. * 전체 순으로 우선순위가 높은것으로 확인된다.

결합자
선택자의 업그레이드 버전 선택자를 결합하여 세밀하게 찾을 수 있는 기능을 한다.

1. 후손 결합자

.chiko li { /* 띄어쓰기를 통해서 chiko클래스의 하위 li항목 모두 색상을 green으로 변경 */
	color: green;
}

2. 자식 결합자

.chiko > li { /*위와 비슷하지만 >를 사용하여 chiko클래스의 바로 아래 자식 중 li요소만 선택*/
	color: green;
}
.chiko > li p { /*chiko자식인 li요소 중 p태그를 가진 자손 모두를 선택할수도 있다.*/
	color: green;
}

3. 일반형제 결합자

/*chiko클래스 이후 같은 레벨에 있는 형제li요소 싹 다 */
.chiko ~ li {
	color : green
}

4. 인접형제 결합자

/* chiko클래스 이후 바로 다음 li형제하나 */
.chiko + li {
	color: red
}

가상 클래스

ul > li:first-child{/*ul내부 li태그 중 첫째 자식*/
  color:green
}

ul > li:not(:last-child){ /*ul내부 li태그 중에 마지막놈 제외*/
  color:green
}

/*ul태그 중에 chiko클래스가 아닌 ul중 li자손을 지칭하는 요소 가상 클래스*/
ul:not(.chiko) li {
	color:green
}

/* ~번째를 지정하는 가상 클래스 */
/* a =( k(k번째 요소), kn(k번째마다 예 :3n), kn+b(kn한 것을 b만큼 쉬프트), 
odd(홀수번째), even(짝수번째) )등이 있음 */
ul li:nth-child(a) {
	color: pink;
}

예시

ul > li:not(:last-child){
  color:green
}

.chiko li:nth-child(odd){
  color:pink;
}

ul:not(.chiko) li:last-child{
  color:red;
}

.chiko li:last-child{
  color:skyblue;
}
<body>
  <ul>
    <li>치코리타</li>
    <li>파이리</li>
  </ul>
  <ul class="chiko">
    <li>이상해씨</li>
    <li>브케인</li>
  </ul>
</body>

결과

이 외에도 가상클래스(의사클래스)는 되게 많기도 하고, 결합하여 선택하는 방법이 너무나 다양해서 어떻게 하는게 맞다라고 콕 집어 말하기가 어려운 것 같다. 그저 많이 사용해보면서 익히는게 좋은 방법이지 않을까?

profile
치코리타
꾸준히 진득하게 앞으로
이전 포스트

CSS적용방법

다음 포스트

CSS 텍스트 관련

0개의 댓글