[CSS] Selector(선택자)

안녕하세요. 명월입니다.

이 글은 CSS에서 Selector(선택자)에 대한 설명입니다.

CSS의 선택자(Selector)란, Html 태그에 css style을 적용하기 위한 지시자입니다. 선택자는 단일 태그를 설정해서 적용하는 것도 가능하지만, 복수의 태그를 설정해서 적용하는 것도 가능합니다.

css의 selector는 css style에서 사용되는 지시자입니다만, 최근에는 Jquery 시즐 엔진에서 시작된 css selector는 javascript, html 태그 파싱하는 부분에서까지 많은 영역에서 사용되는 문법으로 발전했습니다.

참조 - https://www.w3schools.com/cssref/css_selectors.asp

이 selector를 설명하기 위해 간단한 예제 html 도큐멘트를 만들겠습니다.

<div id="test">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>C</td>
        <td>D</td>
      </tr>
    </tbody>
  </table>
</div>

위 소스는 흔한 html 태그 구조입니다. div 태그 안에 table 태그를 넣어서 테이블을 만들었습니다.

위 예제는 css에서 사용되는 class를 빼고 순수 tag만으로 selector를 설정해서 style을 적용하겠습니다.

/* table 태그를 설정한다. */
table {
  border-top:1px solid #000;
  border-left:1px solid #000;
  border-spacing: 0px;
  padding:0px;
}
/* th 태그를 설정한다. */
th {
  border-bottom:1px solid #000;
  border-right:1px solid #000;
  width:500px;
  height:50px;
}
/* td 태그를 설정한다. */
td {
  border-bottom:1px solid #000;
  border-right:1px solid #000;
  width:500px;
  height:50px;
}
/* div 태그의 id가 test인 오브젝트의 바로 밑 파생태그 table 태그의 바로 밑 파생 태그 tbody의 바로 밑 파생 태그 tr의 바로 밑 파생 태그 첫번째 td 태그를 설정한다. */
div#test > table > tbody > tr > td:nth-child(1) {
  background-color:#000;
  color:#FFF;
}

위 태그를 설정한 결과는 다음과 같습니다.

태그의 대한 설정은 table 태그의 경우 테두리의 위와 왼쪽을 1px 너피의 검은색 실선으로 표시합니다. th 태그의 경우와 td의 경우는 너비가 500px, 높이가 50px이고 하단과 오른쪽 테두리의 아래와 오른쪽을 검은색 실선으로 표시합니다.

마지막은 tbody의 tr에서 첫번째 td태그에 적용이 되는 것인데, 바탕은 검은 색에 글자색은 흰색으로 표시되는 것이네요.

선택자	설명
.class	class=”class”의 모든 요소를 선택
#id	id=”id”의 모든 요소를 선택
*	전체 선택자 – 모든 요소를 선택
element	요소 선택자 – 지정된 요소를 선택
element,element	요소 선택자 – 선택할 요소를 여러 개 지정
element element	자손 선택자 – 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택
element>element	자식 선택자 – 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택
element+element	인접 선택자 – 지정된 요소와 같은 레벨의 바로 다음 요소 선택
element1~element2	element1 요소 바로 뒤에 배치 된 모든 element2 요소를 선택
[attribute]	속성 선택자 – 지정된 속성 가진 요소를 모두 선택
[attribute=value]	속성 선택자 – 지정된 속성의 값을 가진 요소를 모두 선택
[attribute~=value]	속성 선택자 – 지정된 속성에 지정된 값이 포함된 요소를 모두 선택
[attribute|=value]	속성 선택자 – 지정된 속성 값이 지정된 값으로 시작하는 모든 요소를 선택
[attribute^=value]	속성 선택자 – 지정된 속성 값이 지정된 값으로 시작하는 모든 요소를 선택
[attribute$=value]	속성 선택자 – 지정된 속성 값이 지정된 값으로 끝나는 모든 요소를 선택
[attribute*=value]	속성 선택자 – 지정된 속성 값이 지정된 값을 포함한 모든 요소를 선택
:active	모든 활성화된 요소를 선택
:after	지정된 요소의 뒷 부분을 선택
:before	지정된 요소의 앞 부분을 선택
:checked	모든 checked 된 요소를 선택
:disabled	모든 disabled 된 요소를 선택
:empty	자식 노드가 없는 지정된 요소를 선택
:enabled	모든 enabled 된 요소를 선택
:first-child	지정된 요소의 첫번째 자식 노드를 선택
:first-letter	지정된 요소의 첫 번째 문자를 선택
:first-line	지정된 요소의 첫 번째 줄을 선택
:first-of-type	지정된 요소의 첫번째 자식 노드의 모든 요소를 선택
:focus	모든 포커스 된 요소를 선택
:hover	마우스 hover 된 요소를 선택
:in-range	지정된 범위 내의 값으로 입력 요소를 선택
:invalid	잘못된 값을 가진 모든 입력 요소를 선택
:lang(language)	지정된 값의 언어로 되어 있는 요소를 선택
:last-child	지정된 자식 노드의 마지막 요소를 선택
:last-of-type	지정된 요소의 마지막 자식 노드의 모든 요소를 선택
:not	지정된 요소가 없는 요소를 선택
:nth-child(n)	지정된 요소와 같은 레벨 요소의 n번째의 요소를 선택
:nth-last-child(n)	지정된 요소와 같은 레벨 요소의 뒤에서 n번쨰의 요소를 선택
:nth-last-of-type(n)	마지막 자식부터 계산, 부모의 두 번째 지정된 요소의 모든 요소를 선택
:nth-of-type(n)	부모의 두 번째 지정된 요소의 모든 요소를 선택
:only-of-type	부모의 유일한 지정된 요소의 모든 요소를 선택합니다
:only-child	부모의 유일한 자식인 모든 요소를 선택합니다
:optional	지정된 필수 속성이 없는 요소를 선택합니다.
:out-of-range	지정된 범위를 벗어난 값을 입력 요소를 선택
:read-only	읽기 전용 속성인 지정된 요소를 선택
:read-write	읽기 전용 속성이 아닌 지정된 요소를 선택
:required	지정된 필수속성인 있는 요소를 선택
:root	문서의 루트 요소를 선택
::selection	사용자에 의해 선택된 요소의 일부를 선택
:target	target이 지정된 요소를 선택
:valid	유효한 값 모든 입력 요소를 선택
:visited	모든 방문한 링크를 선택

크게 selector 지시자는 위 예제 처럼 tag로 선택하는 경우가 있고, 가장 많이 사용되는 클래스 별로 선택되는 경우가 있습니다.

클래스의 경우는 id와 다르게 한 오브젝트에 여러 클래스가 중복 설정이 가능하기 때문에 css에서는 보통 class로 css style를 설정하는 경우가 많습니다.

또는 attrubute로 설정하는 경우도 있습니다. 의사 선택자라고 태그의 구조에 따라 설정하는 경우도 있습니다.

<div id="test">
  <p class="p1">p1</p>
  <p class="p2 margin-0">p2</p>
  <p class="p3 padding-0">p3</p>
  <p class="p4 border-1">p4</p>
</div>

/* id가 test인 태그 바로 밑 파생 태그로 클래스가 p1인 오브젝트*/
#test .p1 {
  color: red;
}
/* id가 test인 태그 바로 밑 파생 태그로 클래스가 p2인 오브젝트*/
#test .p2 {
  color: blue;
}
/* id가 test인 태그 바로 밑 파생 태그로 클래스가 p3인 오브젝트*/
#test .p3 {
  color: green;
}
/* id가 test인 태그 바로 밑 파생 태그로 클래스가 p3인 오브젝트*/
#test .p4 {
  color: pink;
}
/* 클래스가 margin-0 인 오브젝트, 클래스는 첫 글자가 아닌 이상 하이픈(-)을 허용한다. */
.margin-0 {
  margin: 0px;
}
/* 클래스가 padding-0 인 오브젝트, 클래스는 첫 글자가 아닌 이상 하이픈(-)을 허용한다. */
.padding-0 {
  padding: 0px;
}
/* 클래스가 border-1 인 오브젝트, 클래스는 첫 글자가 아닌 이상 하이픈(-)을 허용한다. */
.border-1 {
  border: 1px solid #000;
}

여기서 가장 많이 사용되는 id 지시자와 class 지시자입니다.

id의 경우는 「#」으로 시작하고 class의 경우는 「.」으로 시작됩니다.

위 예제를 보면 div의 id는 test이고 그 파생 태그로 p태그의 p1, p2, p3, p4가 있습니다. 「#test .p1」의 의미로는 id가 test인 오브젝트의 파생으로 .p1클래스를 가진 오브젝트를 뜻하는 것입니다.

클래스의 경우는 중첩도 가능한데 p2와 margin-0, p3와 padding-0, p4와 border-1클래스가 중첩이 되었습니다.

이렇게 사용하는 경우가 아마 css에서 가장 많이 사용하는 방법이지 않을까 싶습니다.

그러나 그 외에 속성(어트리뷰트)로 설정하는 방법, 태그의 위치에 따라 설정하는 방법이 있습니다만 그건 글을 나누어서 자세히 설명하겠습니다.

여기까지 CSS에서 Selector(선택자)에 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.