CSS Selector 1 - 선택자

in Tech on Publishing, CSS
  1. 개요
  2. 기본 선택자
    1. 전체 선택자
    2. 태그 선택자
    3. 클래스 선택자
    4. Id 선택자
    5. Attribute 선택자
      1. 일치 선택자
      2. 포함선택자
      3. 시작 선택자
      4. 맺음 선택자
  3. 복합 선택자(결합자)
    1. 일치 선택자
    2. 자손 선택자
    3. 자식 선택자
    4. 인접(후속) 형제 선택자
    5. 일반 형제 선택자
  4. 가상 선택자
    1. 동적 의사 선택자
    2. 상태 의사 선택자
    3. 구조 의사 선택자
  5. 가상 요소 선택자
  6. 기타 선택자
  7. 맺음

개요

CSS 란 Cascading Style Sheets 의 약어로
직역하면 위에서 아래로 내려가는(폭포처럼) 스타일 문서 정도로 이해할 수 있는데요.

여기서 Cascading 이라는 뜻은 중요도, 명시도, 코드 순서에 따라 적용되는 의미를 가집니다.(우선순위를 의미합니다.)

이러한 CSS의 가장 기초가 되는 것이 바로 Selector 입니다.


CSS 선택자는 크게 3가지로 분류할 수 있습니다.

  • 기본 선택자
  • 복합 선택자
  • 가상 선택자

각각의 Selector에 대해서 예시와 함께 알아보고 중요한 우선순위에 대해서 다루고자 합니다.

기본 선택자

가장 기본이 되는 선택자로 전체 선택자, 태그 선택자, 클래스 선택자, Id 선택자, Attribute 선택자 5가지가 있습니다.

See the Pen basic selector by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen.


전체 선택자

선택자 : *
웹페이지의 모든 요소를 선택자하는 Universal Selector 입니다.
전체 요소에 적용되는 선택자이기 때문에 사용할 수 있는 경우가 적은 선택자입니다.
스타일을 초기화 하거나, 자식 요소에 대해서 사용하는 경우가 많은 선택자입니다.

*{
  background-color : skyblue;
}

태그 선택자

선택자 : 태그명칭
HTML의 태그 요소 명칭으로 요소를 찾는 선택자입니다.

span {
  background-color : greenyellow;
}

클래스 선택자

선택자 : .class-name
HTML 요소에 부여된 class 명칭으로 요소를 찾는 선택자입니다.

.item{
  background-color : blueviolet;
}

Id 선택자

선택자 : #id
HTML에서 고유한 값으로 사용되는 id로 요소를 찾는 선택자입니다.

#first{
  background-color : orangered;
}

Attribute 선택자

선택자 : []
태그가 가지고 있는 속성(attribute)으로 요소를 찾는 선택자입니다.
속성에 대한 선택자이기 때문에 다른 기본 선택자들과 다르게 정의 할수 있는 선택 option이 많습니다.

  • 일치선택자 [속성], [속성="속성값"] : 속성값과 일치하는 요소를 찾습니다.
  • 포함선택자 [속성~="속성값"], [속성*="속성값"] : 속성값을 포함하는 요소를 찾습니다.
  • 시작선택자 [속성^="속성값"], [속성 \|="속성값"] : 속성값으로 시작하는 요소를 찾습니다.
  • 맺음선택자 [속성$="속성값"] : 속성값으로 끝나는 요소를 찾습니다.
일치 선택자
  • [속성] : 입력한 속성을 가지는 요소를 찾습니다.

See the Pen attribute selector 1 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


[type] {
    background-color: orangered;
}
/* 혹은 */
input[type] {
    background-color: orangered;
}
  • [속성이름="속성값"] : 속성이름의 값이 속성값인 요소를 찾습니다.

See the Pen attribute selector 2 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[type="submit"] {
  background-color: yellow;
}
포함선택자
  • [속성이름 ~= "속성값"] : 속성값을 포함하는 요소를 찾습니다. 이때 속성값은 띄어쓰기 구분하는 문자열 중 일치하는 값으로 찾습니다.

See the Pen attribute selector 3 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[value~="button1"] {
  background-color: yellow;
}
  • [속성이름 *="속성값"] : 속성값이 포함/일치 하는 요소를 찾습니다. 속성값이 일부만 일치하여도 적용됩니다.

See the Pen attribute selector 4 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[value*="button"] {
  background-color: orangered;
}
시작 선택자
  • [속성이름 ^= "속성값"] : 속성값으로 시작(포함/일치)하는 요소를 찾습니다.

See the Pen attribute selector 5 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[value ^="button"] {
  background-color: yellow;
}
  • [속성이름 |= "속성값"] : 속성값으로 정확히 일치하거나, -(하이픈)앞의 prefix 속성값과 일치하는 요소를 찾습니다.
    속성값이 정확히 일치한다는 것은, 하나의 속성값만을 가지고 그 값이 일치하는 것을 말합니다.
    -(하이픈) prefix 란 것은 속성값이 ko-KR 일때 [속성 \|= "ko"]로 일치하는 것을 말합니다.

See the Pen attribute selector 6 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[value |="btn"] {
  background-color: yellow;
}
맺음 선택자
  • [속성이름 $= "속성값"] : 속성값으로 끝맺음 하는 요소를 찾습니다.

See the Pen attribute selector 7 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


input[value$="버튼"] {
  background-color: yellow;
}

복합 선택자(결합자)

선택자를 결합하여 만드는 선택자로 특정 기호를 사용하여 결합하는 방식입니다.

HTML의 태그들은 포함관계를 이룰 때 부모, 자식으로 구분할 수 있습니다.

  <html> <!--가장 밖의 부모-->
      <body> <!--div의 부모이면서 html의 자식-->
          <div></div><!--body의 자식-->
      </body>
  </html>

이러한 부모/자식 관계를 알고 보시면 더 좋습니다.

일치 선택자

기호 : ""
몇가지 선택자를 연결하고, 지정한 선택자를 모두 만족하는 요소를 찾는 선택자입니다.

See the Pen attribute selector 8 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


div.item {
  background-color: orange;
}
div#first.item {
  background-color: orangered;
}

자손 선택자

기호 : " "(공백)
첫번째 요소의 하위 요소 중 일치하는 모든 요소를 찾는 선택자입니다.
자식 결합자와 명칭도 비슷하고 동작이 유사하지만 모든 하위, 직계의 차이가 있어서 명칭이 자손,자식으로 나뉩니다.

See the Pen attribute selector 9 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


section div{
  background-color: orange;
}

자식 선택자

기호 : >
첫번째 요소의 하위 요소 중 일치하는 직계 하위(자식) 요소를 찾는 선택자입니다.
자손 결합자는 하위 모든 요소들중 일치하는 요소를 모두 찾지만 자식 결합자는 직계 하위요소에서 일치하는 요소만을 찾습니다.

See the Pen attribute selector 10 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


section > div {
  background-color: orange;
}

인접(후속) 형제 선택자

기호 : +
같은 부모의 자식요소 중 첫번째 요소의 바로 다음에 오는 하나의 요소를 찾는 선택자입니다.

See the Pen attribute selector 11 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


.primary + div {
  background-color: orange;
}

일반 형제 선택자

기호 : ~
같은 부모의 자식요소 중 첫번째 요소의 다음에 오는 모든 요소를 찾는 선택자입니다.
인접 형제 선택자와 다르게 모든 형제 요소를 찾습니다.

See the Pen attribute selector 12 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen. 


.primary ~ div {
  background-color: orange;
}

가상 선택자

기호 : :
CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있습니다.
이 것들은 html의 태그 요소로써 요소의 특정한 상태(state)를 나타내거나 디자인적인 요소를 추가할 때 사용됩니다.

가상 선택자는 가상 클래스를 찾는 선택자입니다.

크게 동적 의사 클래스, 상태 의사 클래스, 구조 의사 클래스 선택자가 있습니다.
가상클래스의 경우 정말 많은 클래스가 있기때문에 가상클래스에서 더 많은 클래스를 확인하시기 바랍니다.

a:link{
    background-color: orange;
}
input:focus{
    background-color: orange;
}

동적 의사 선택자

선택자 설명
:link 사용자가 한번도 방문하지않는 상태
:visited 사용자가 한번이라도 방문한 상태
:hover 사용자가 마우스 커서를 요소에 올린 상태
:active 사용자가 요소를 마우스 좌클릭으로 클릭하고 있는 상태
:focus 대화형 콘텐츠의 focus 상태 (ex:input)

상태 의사 선택자

선택자 설명
:checked input 요소 중 checked 된 상태 <input type=”” checked/>
:enable input 요소 중 사용한 상태 <input type=”” />
:disable input 요소 중 사용이 불가한 상태 <input type=”” disabled/>

구조 의사 선택자

child와 type의 차이가 존재하고 ()안에 조건식을 넣을 수 있는 등 이 포스트에 다 담지 못하는 내용이기에
구조의사 선택자의 경우 다른 포스트에서 자세히 다루도록 하겠습니다.

선택자 설명
:first-child 모든 자식요소 중 맨 앞의 요소
:last-child 모든 자식요소 중 가장 마지막 요소
:nth-child() 모든 자식요소 중 ()의 조건에 해당하는 요소를 앞에서 부터 모두 선택
:nth-last-child() 모든 자식요소 중 ()의 조건에 해당하는 요소를 뒤에서 부터 모두 선택
:first-of-type 모든 자식요소 중 앞에서 등장하는 특정 Type의 요소를 모두 선택
:last-of-type 모든 자식 요소 중 뒤에서 등장하는 특정 Type의 요소를 모두 선택
:nth-of-type() 모든 자식요소 중 ()의 조건에 해당하는 Type의 요소를 앞에서 부터 모두 선택
:nth-last-of-type() 모든 자식요소 중 ()의 조건에 해당하는 요소를 뒤에서 부터 모두 선택
:only-child 자식요소로 오직 단 하나의 요소를 가지는 요소를 선택
:only-of-type 자식요소로 오직 단 하나의 Type의 요소를 가지는 요소를 선택
:empty 자식 요소를 하나도 가지지 않는 요소를 모두 선택
:root 문서의 root 요소를 선택

가상 요소 선택자

기호 : ::
가상 요소 선택자는 가상 요소(:pseudo-element)를 찾는 선택자입니다.

선택자 설명
::first-letter 텍스트의 첫 글자만을 선택
::first-line 텍스트의 첫 라인만을 선택함
::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
::after 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용
::selection 해당 요소에서 사용자가 선택한 부분만 선택

기타 선택자

선택자 설명
:not() () 조건에 해당하지않는 요소 선택
:lang() HTML lang 속성값이 ()로 지정된 요소를 선택
:target # target으로 이동이 된 요소를 선택

맺음

CSS를 작성하기 위해 가장 기초가 되는 Selector에 대해서 알아보았는데요.
이렇게 작성한 것을 바로 써보고 하는것이 정말 좋지만,
막상 응용이 잘 안될때나 시작은 심심풀이로 게임을 해보시는건 어떨까요?

:phone: 글에 대한 긍정적, 부정적 모든 피드백을 환영합니다. 말씀주시고 싶은 내용은 댓글이나 메일로 알려주시면 감사합니다!

© 2023.04 All rights reserved.

Powered by Hydejack v9.1.6