CSS 선택자(Selector)

기본선택자(Basic Selector)

  전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자 이렇게 나눌 수 있다.

  전체선택자(Universal Selector)는 요소 내부의 모든 요소를 선택한다.

  사용은 * { } 이러한 형태로 사용한다.

  전체선택자의 경우는 태그 종류와 상관없이 모든 태그에 적용된다.

 

  태그선택자(Type Selector)는 태그 이름이 E인 요소를 선택한다.

  예를들어 div태그에 적용하겠다고 하면 div { } 형태로 사용한다.

  html 내의 모든 div태그에 적용된다.

 

  클래스 선택자(Class Selector)는 태그의 class속성값이 E인 요소를 선택한다.

  <div class="name"> </div>

  이렇게 적혀있다고 할 때 .name { } 형태로 사용한다. 그럼 모든 div에 적용되는것이 아닌

  클래스가 name인 것에만 적용이 된다.

 

  아이디 선택자(Id Selector)는 태그의 id 속성값이 E인 요소를 선택한다.

  <input type="text" id="name"> 이렇게 있다고 했을 때 적용하기 위해서는 #name { } 이렇게 사용한다.

 

 

복합선택자(combinators)

  일치선택자(Basic Combinator)는 E와 F를 동시에 만족하는 요소를 선택한다.

  span.orange { } 형태로 사용하는데 그럼 html안에 있는 span태그에 orange라는 class속성을 갖고 있는 태그만 찾아서

  적용하는 것이다.

  <span class="orange"></span> 이러한 형태의 태그만 찾아서 적용하는 것이다.

 

  자식선택자(Child Selector)는 E의 자식요소 F를 선택한다.

  자식요소를 의미하는 >를 사용해 표현한다.

  ul > .orange { } 형태로 사용하는데 그럼 ul태그 안에 있는 요소들 중 orange라는 class의 값을 갖고 있는 요소들만

  적용하는 것이다.

<ul>
  <li class="apple"></li>
  <li class="orange"></li>
</ul>

  이렇게 있다고 할 때 ul태그 안에 있는 li태그중 apple은 제외하고 orange에만 적용하게 된다.

 

  하위선택자(Descendant Combinator)는 E의 하위요소 F를 선택한다.

  띄어쓰기가 선택자의 기호로 사용된다.

  div .orange { } 형태로 사용된다.

<div>
  <ul>
    <li class="apple"></li>
    <li class="orange"></li>
    <span class="orange"></span>
  </ul>
</div>

  위와 같은 코드에서는 두번째 li태그와 span태그에만 적용이 된다.

 

  이때 같은 위치에 있는 요소는 형제요소라고 부르고 아래로는 하위요소 위로는 상위요소라고 부른다.

<div>
  <ul>
    <li></li>
  </ul>
  <p></p>
  <span></span>
</div>

  이러한 코드의 형태에서 보자면 ul태그와 p, span태그는 형제요소다. ul은 li의 상위요소이며 li는 ul의 하위요소가 된다.

  li에게 ul은 부모요소라고도 표현을 하지만 li에게 div는 상위요소 혹은 조상요소라고 한다.

 

  인접형제선택자(Adjacent sibling Combinator)는 E의 다음 형제요소 F하나만 선택한다.

  .orange + li { } 형태로 사용하는데 +의 경우는 다음에 인접해 있는 형제 요소를 찾는다.

  orange라는 클래스를 갖고 있는 다음 형제요소가 적용된다.

 

<ul>
  <li>1</li>
  <li class="orange">2</li>
  <li>3</li>
  <li>4</li>
</ul>

.orange + li {
  color: red;
}

  이렇게 작성하게되면

 

  이러한 결과를 볼 수 있다. orange라는 class를 갖고 있는 요소의 다음 형제요소인 3에 적용이 되는것이다.

 

<ul>
  <li>1</li>
  <li class="orange">2</li>
  <p>hi</p>
  <li>3</li>
  <li>4</li>
</ul>

  HTML을 이렇게 변경해준다면 p를 넘어가고 다음 li태그인 3에 적용될 것 같았지만 적용되지 않는다.

  li에 해당 하는 바로 다음태그에 적용하는 것이 아닌 바로 다음 태그에 대한 적용을 하는 방법이기 때문에 안된다.

  만약 이러한 방법으로 여기서 hi의 컬러를 바꿔주고 싶다면

.orange + p{
  color: red;
}

  이렇게 작성해주면 가능하다.

 

  일반 형제 선택자(General sibling Combinator)는 E의 다음 형제요소 F를 모두 선택한다.

  기호는 ~를 사용하며 .orange ~ li { } 형태로 사용한다. 그럼 orange라는 class값을 갖고 있는 태그 밑으로 작성되어

  있는 모든 태그들에 적용된다.

<ul>
  <li>1</li>
  <li class="orange">2</li>
  <p>hi</p>
  <li>3</li>
  <li>4</li>
</ul>

.orange ~ li {
  color: red;
}

  이렇게 작성하면 orange밑에 있는 hi, 3, 4 중에서 hi를 제외한 3, 4만 글자색이 변경된다.

 

 

레퍼런스

패스트캠퍼스 올인원패키지 - CSS