CSS - 선택자

기본 선택자

---

1. * : 전체 선택자

• 모든 요소를 선택한다.

  /* 모든 요소의 글씨 색상을 red로 바꾸고 padding값 20px 적용 */
  * {
      color : red;
      padding : 20px;
  }

---

2. T : 타입 선택자

• html 태그의 이름으로 요소를 직접 선택한다.

/* 태그 이름으로 직접 요소를 선택 */
p {
	text-align : center;
    font-size : 32px;
}

---

3. . : 클래스 선태자

• 요소의 class 속성값과 비교하여 요소를 선택한다.
• 요소는 여러개의 클래스를 가질 수 있다

  <!-- class 지정 : 띄어쓰기를 통해 구분하여 여러개의 클래스 적용 가능 -->
  <div class="box red"></div>

  /* class 값으로 "box" 값을 가진 요소에 width, height 50px씩 적용 */
  .box {
  	width : 50px;
      height : 50px;
  }
  /* class 값으로 "box" 값을 가진 요소에 배경색 red 적용  */
  .red {
  	background : red;
  }

---

4. # : 아이디 선택자

• 요소의 id 속성값과 비교하여 요소를 선택한다.

• 요소 여러개의 아이디를 가질 수 없다.

• 아이디 값은 문서 내에 유일해야한다.

  <!-- id 속성 지정 : id 속성 값은 하나만 지정. 문서 내에 고유해야 함. -->
  <p id="big">큰 글씨가 나타납니다!</p>

      /* id 속성 값에 "big" 지정 된 요소의 글씨 크기 32px 지정 */
  	#big {
      	font-size : 32px
      }

---

복합 선택자

여러 선택자를 조합하여 더욱 정밀하게 요소를 선택할 수 있다.

---

1. 일치 선택자

• 여러 조건을 충족하는 요소를 선택한다.

  /* span태그 이면서 red라는 클래스를 가진 요소를 선택 */
  span.red {
  	color : red;
  }
  #big.box {
  	width : 200px;
      height : 200px;
  }

---

2. 자식 선택자

• 자식(바로 밑의 자손) 요소를 선택한다.

  /* container라는 클래스를 가진 요소의 바로 밑의 p 태그만 선택*/
  .container > p {
  		text-align : center;
  }

---

3. 후손 선택자

• 후손 요소들을 선택한다.

  /* .tapList 안에 모든 li의 색상 변경  */
  .tapList li {
        color : red;
  }

---

4. 인접 형제 선택자

• 요소의 바로 다음에 요소 하나만 선택

  .target + p {
     	/* .target 요소의 바로 다음의 p태그 하나만 글씨 크기 변경 */
      font-size : 32px;
  }

---

5. 일반 형제 선택자

• 같은 부모 내에 있는 형제 요소 모두 선택

  /* .target 요소의 다음에 오는 형제 요소 중 p태그의 글씨 가중도 변경 */
  .target ~ p {
  	font-weight : 700;
  }

---

속성 선택자

• 요소에 입력된 속성으로 요소를 선택

1. 요소[속성] : [] 안의 속성을 가진 요소를 선택

   /* input 요소 중 required라는 속성을 가진 input 요소만 border 굵기 변경 */
   input[required] {
   	border-width : 4px;
   }

---

2. 요소[속성=값] : 요소의 특정 속성 값으로 요소를 선택.

   /* input 요소 중 type 속성 값이 checkbox인 요만 margin 적용 */
   input[type=checkbox] {
   		margin : 10px;
   }

---

가상 클래스(Pseudo Class) 선택자

가상 클래스(Pseudo Class)는 요소에 특정한 조건에 만족할 때에만 CSS를 적용을 할 때 사용하는 선택자이다.
선택자:가상클래스의 형태로 작성한다.

/* p 태그 중 마우스가 올라간 p 태그만 배경색을 빨간색으로 지정. */
p:hover {
	background-color : red;
}

/* a 태그 중 클릭 중(클릭 후 떼기 전)인 a태그만 글씨를 파란색으로 적용. */
a {
	color : blue;
}

/* li 태그 중 첫번째 자식요소인 li 태그만 글씨를 굵게 지정*/
li:first-child {
	font-weight : bold;
}

---

가상 요소(Pseudo Element) 선택자

HTML 문서내에 존재하지 않지만 가상의 요소를 추가하여 CSS를 적용하는 선택자이다.
선택자::가상요소의 형태로 작성한다.

/* ul태그의 가장 첫번째 자식 요소 앞(before)에 가상의 요소를 추가한다.*/
ul::before {
	content : "가상 요소(before)";
    color : red;
}

/* ul태그의 가장 마지막 자식 요소 뒤(after)에 */
ul::after {
	content : "가상 요소(after)";
    color : blue;
}