CSS 선택자란?

DG-NOTE·2022년 5월 5일
0

CSS에서 선택자란?

CSS 작성할때 HTML의 어떤 요소를 선택할 것 인지를 정하는 것이다.
추후에 자바스크립트나 제이쿼리를 공부할때도 CSS의 선택자가 중요하다.

* 태그선택자

  • 태그를 선택하여 CSS 스타일을 지정해줄 수 있다.
  • 보통 HTML에 작성 된 특정 태그 모두를 수정해줄 수 있다.
  • 전체 페이지에 일관성있게 적용시킬 수 있다.
    a { /* a태그를 직접 지정한다. */
       	text-decoration: none; 
       	color:black;
       } 

* 아이디 선택자

  • ID는 유일한 값이기 때문에 특정 요소에게 CSS스타일을 지정하고 싶을때 사용한다.
  • 아이디값에 '#'을 붙혀서 작성한다.
      #container{
	      color: black;
       }

* 클래스 선택자

  • ID선택자와 유사하게 지정된 class명으로 CSS스타일을 지정한다.
  • 클래스명 앞에 '.' 마침표를 붙혀서 작성한다.
      .fontSize{
         font-size: 10px;
       {

* 속성선택자

  • 속성의 존재 여부나 그 값을 활용하여 요소의 스타일을 지정한다.

  • 속성이 존재하면 해당속성에 스타일을 부여할 수 있다.

    <a href="http://naver.com" target="_blink"></a>
    ▶ 속성 존재 유무로 스타일 부여
     a[target] {
       color: yellow;
     }
    ▶  속성의 값이 일치할경우 스타일 부여
    a[href="http://naver.com"] {
     color: yellow;
    }
    
    ▶  속성의 값이 시작하는 단어로 포함하면 스타일 부여
    a[href^="http://"] {
     color: green;
    }
    
    ▶ 속성의 값이 끝나는 단어로 포함하면 스타일 부여
    a[href$=".com"] {
     color: green;
    }
    ▶ 속성의 값의 단어를 포함하면 스타일 부여
    a[href*="naver"] {
     color: black;
    }

* 가상클래스 선택자

  • 선택자 뒤에 가상이벤트를 붙이면 특정요소의 스타일을 부여할 수 있다.
    <li class="study">HTML</li>
    <li class="study">javascript</li>
    <li class="study">css</li>
    <li class="study">jquery</li>

▶첫번째 자식요소에 스타일을 부여
li:first-child {
  color: green;
}

▶마지막 자식요소에 스타일을 부여
li:last-child {
  color: green;
}

▶ 인덱스를 넣어서 스타일을 부여
▶ nth-child(N) : N번째 자식의 요소에 스타일 부여
▶ odd(홀수), even(짝수)와 같이 스타일을 부여할 수 있음.

li:nth-child(2) {
  color: green;
}
<section>
  <div>HTML</div>
  <p>javascript</p>
  <p>css</p>
  <div>jquery</div>
  <p>react</p>
</section>
<input type="checkbox" name="ch1">
▶ p타입들 중에 첫번째 요소에 스타일 부여
  p:first-of-type {
    color: blue;
  }
▶ p타입들 중에 마지막 요소에 스타일 부여
  p:last-of-type {
    color: blue;
  }
▶ N번째 있는 요소의 스타일 부여
  p:nth-of-type(N){
   color: blue;
  }
▶ 마우스를 올린 대상의 요소에 스타일 부여
  section:hover {
   color: blue;
  }
▶ 체크유무를 이용하여 radio, checkbox의 스타일을 부여
  input:checked {
   background-color: blue;
  }

* 가상 요소 선택자

  • 말 그대로 가상의 요소를 만들어서 사용한다
<li class="study good">HTML</li>
<li class="study">javascript</li>
<li class="study">css</li>
<li class="study">jquery</li>
▶ before after로 앞 뒤로 가상의 요소를 만들어낸다.
.good::before {
  content: ' ';
  border: 1px solid red;
}
.good::after {
  content: ' ';
  border: 1px solid red;
}
<p class="study">안녕하십니까 저는 CSS를 배우고 있는 학생입니다.</p>
<p class="study">CSS란? </p>
▶ 각 문장의 첫번째 글자에 스타일을 부여
.stydy::first-letter {
  color: red;
  font-size: 30px;
}
▶ 각 문장의 첫번째 문장에 스타일을 부여
.stydy::first-line {
  color: red;
  font-size: 30px;
}
▶ 드래그로 선택된 영역의 스타일을 부여
.stydy::selection {
  color: red;
  font-size: 30px;
}

* 선택자 결합 사용

  • 자식요소 선택 또는 형재요소를 선택할때할 선택자를 결합하여 사용한다.
<div id="stury">
 <h1>HTML</h1>
 <span>HTML</span>
 <p class="good">HTML</p>
 <p>HTML</p>
</div>
▶ study 클래스 밑에 있는 good 클래스
#study .good {
 color: green;
}

▶ 바로 밑의 자식 요소의 스타일을 부여함
#study > span {
 color: yellow;
}

▶ 요소 바로 뒤에 오는 형재요소에 스타일을 부여함
#study span ~ p {
 color: yellow;
}

▶ 앞뒤로 인접해 있는 형재요소에 스타일을 부여함
#study span + h1 {
 color: yellow;
}
▶ 다중 선택하여 스타일을 부여
#study h1, #study p {
 color: yellow;
}
profile
수업들은 것을 정리하고, 공부하기 위한 블로그

0개의 댓글