[CSS] 여러가지 선택자

 

 

오늘은 여러 가지 선택자에 대해 알아보자

 

 

 

 

[ 연결 선택자 ] 

 

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 

그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다.

 

[ 하위 선택자 ]

하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택 자라고도한다. 

즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 

하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.

 

상위요소 하위요소

 

 

 

[ 자식 선택자 ]

자식 선택자(child selector)는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다. 

 

부모요소 > 자식요소

 

 

 

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다. 

 

 

 

[ 인접 형제 선택자 ]

형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자(adjacent selector)라고 한다.

인접 형제 선택자를 정의할 때는 다음 기본형과 같이 요소1과 요소 2 사이에 '+' 기호를 표시한다. 

요소1과 요소 2는 같은 레벨이면서 요소 1 이후 가장 먼저 오는 요소 2를 선택한다.

 

요소1 + 요소2

 

 

[ 형제 선택자 ]

형제 선택자(sibliing selector)는 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용된다.

형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다. 

즉, 요소1과 형제인 요소 2를 모두 선택하는 것이다.

 

요소1 ~ 요소2

 

 

 

---

 

 

[ 속성 선택자 ]

 

속성 선택자는 태그 안에서 사용하는 속성값에 따라 요소를 선택하는 역할을 한다.  

 

 

[ 특정 속성이 있는 요소를 선택하는 [속성] 선택자 ] 

HTML 태그를 작성할 때 여러 가지 속성을 함께 사용하는데, 그 속성 값에 따라 원하는 요소를 선택할 수도 있다. 

이때 사용하는 것이 [속성]선택자인데, 대괄호([ ]) 사이에 원하는 속성을 입력하면 된다.

 

 

input[required] {.... }

// required : 찾으려고 하는 속성 이름

 

 

 

[ 특정 속성값이 있는 요소를 선택하는 [ 속성 = 속성 값 ] 선택자 ]

[속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다. 

이 형식은 대괄호 ( [  ])안에 속성과 속성 값을 넣고 그 사이에 '=' 기호를 표시한다. 

 

 

input[type=text] { .... } 
// <input> type이 text인 요소

 

 

 

[ 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [ 속성 ~= 값 ] 선택자 ]

[속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성 값이 포함된 요소를 선택한다.

이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성 값을 찾는데 편리하다.

 

[class ~= btn] { ... }

// class 값중에 btn이 있는 요소

 

여기서 주의할 점은, [속성~=값] 선택자는 btn 값과 정확하게 일치하는 요소를 선택한다는 것이다. 

만약 first-btn이나 btns 처럼 btn 외에 다른 글자가 속성 값에 포함되어 있으면 선택하지 않는다. 

 

 

 

 

[ 특정 속성값이 포함된 속성 요소를 선택하는 [ 속성 |= 값 ] 선택자 ]  (  | => shift + ￦ )

[속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용한다. 

이때 속성값은 한 단어로 일치해야 한다. 

앞에서 다룬 [속성 ~= 값] 선택자와 비슷해 보이지만,[속성 ~= 값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 [속성 |= 값] 선택자와 차이가 있다.

 

즉, [속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택한다.

 

예를 들어 title 속성 값에 us가 있거나 us-로 연결된 속성 값이 있는 a 요소를 찾는다면 다음과 같이 작성한다.

 

a[title |= us] {...}

 

 

 

 

[ 특정 속성값으로 시작하는 속성 요소를 선택하는 [ 속성 ^= 값 ] 선택자 ]

속성 값이 정확하게 일치하지 않더라도 지정한 속성 값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용한다. 

 

 

a[title ^= eng] {....}

 

 위의 코드와 같은 경우 eng로 시작하는 title에는 모두 적용할 수 있다. 

eng, english english2와 같이 eng로 시작하는 요소라면 모두 적용이 가능하다. 

 

 

 

 

 

[ 특정 값으로 끝나는 속성 요소를 선택하는 [ 속성 $= 값 ] 선택자 ]

[속성 ^= 값]이 지정한 속성값으로속성 값으로 시작하는 요소를 선택했다면, [속성 $=값] 선택자는 지정한 속성 값으로 끝나는 요소를 선택한다.

 

[href $= xls] {...}

 

위의 코드의 경우 링크한 파일 이름의 마지막 단어가 xls인 요소를 찾는다면 적용할 수 있다.

 

 

 

 

 

[ 일부 속성값이 일치하는 요소를 선택하는 [ 속성 *= 값 ] 선택자 ]

[속성 *=값] 선택자는 속성값이속성 값이 어느 위치에 있든지 지정한 속성 값이 포함되어 있다면 해당 요소를 선택한다. 

 

[href *= w3] {...}

 

위의 코드의 경우 href 속성값 중에 'w3'가 포함되어 있다면 적용할 수 있다.

 

 

---

 

[ 가상 클래스와 가상요소 ]

[ 사용자 동작에 반응하는 가상 클래스 ] 

사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶으면

가상 클래스 선택자를 사용할 수 있다. 

 

 

1. 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'

웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 

 

 

2. 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'

웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다. 

 

 

3. 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자' 

:hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다. 

 

 

4. 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'

:active 선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다. 

 

 

5. 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'

:focus 선택자는 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다. 

 

 

1. :link 
2. :visited
3. :hover
4. :active

 

---

 

[ 요소 상태에 따른 가상 클래스 ] 

웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있는데, 이때 가상 클래스 선택자를 사용한다.

 

 

1. 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'

문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커(anchor)를 이용한다. 

즉, :target 선택자를 사용하면 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 

 

'앵커'는 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와주는 기능이다. 

 

 

 

2. 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'

해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없느 ㄴ상태일 때 스타일을 지정하려면 :disabled 선택자를 사용한다.

 

 

 

3. 선택한 항목의 스타일을 적용하는':checked 가상 클래스 선택자'

폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가된다.

이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리하다. 

 

 

4. 특정 요소를 제외하고 스타일을 적용하는':not 가상 클래스 선택자'

':not 선택자'는 이름에서도 알 수 있듯이 부정의 의미가 있다.

여기서 not은 '괄호 안에 있는 요소를 제외한'이라는 의미이다.

 

 

not 가상 클래스 선택자

<!DOCTYPE html>
<html>
<head>
  <style>
    /* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
    input:not([type=password]) {
      background: yellow;
    }
  </style>
</head>
<body>
  <input type="text" value="Text input">
  <input type="email" value="email input">
  <input type="password" value="Password input">
</body>
</html>

 

결과:

 

 

 

1. :target
2. :enabled, :disabled
3. :checked
4. :not

 

 

 

[ 정합성 체크 셀렉터 (validity pseudo-class) ]

 

pseudo-class	Desscription
:valid(셀렉터)	정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalud(셀렉터)	정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

 

 

<!DOCTYPE html>
<html>
<head>
  <style>
  
    input[type="text"]:valid {
      background-color: yellow;
    }

    input[type="text"]:invalid {
      background-color: red;
    }
  </style>
</head>
<body>
  <label>입력값이 반드시 필요
    <input type="text" required>
  </label>
  <br>
  <label>특수문자를 포함하지 않는 4자리 문자 또는 숫자
    <input type="text" value="ab1!"
      pattern="[a-zA-Z0-9]{4}" required>
  </label>
  <br>
  <label>핸드폰 번호 형식
    <input type="text" value="010-1111-2222"
      pattern="^\d{3}-\d{3,4}-\d{4}$" required>
  </label>
</body>
</html>

 

결과:

 

입력값이 반드시 필요
특수문자를 포함하지 않는 4자리 문자 또는 숫자
핸드폰 번호 형식

 

 

---

 

 

[  구조 가상 클래스 ]

구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택 자이다. 

 

 

 

[ 특정 위치의 자식 요소를 선택하는 구조 가상 클래스 선택자의 종류 ] 

 

종류	설명
:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child	부모 안에 있는 모든요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
:nth:last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택한다.
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.

 

 

---

 

[  가상 요소  ]

 

가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.

 

가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위함이다. 

 

가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개 (::)를 붙여서 표시한다. 

 

 

1. 첫번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'

::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다. 

 

단,  ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.

 

 

2. 내용 앞뒤에 콘텐츠를 추가하는'::before요소, ::after 요소'

::before요소와 ::after요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다. 

 

3. 드래그한 콘텐츠를 선택하는'::selection요소'

단, iOS Safari 등 일부 브라우저에서 동작하지 않는다.

 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* p 요소 콘텐츠의 첫글자를 선택 */
    p::first-letter { font-size: 3em; }
    /* p 요소 콘텐츠의 첫줄을 선택 */
    p::first-line   { color: red; }

    /* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::before {
      content: " HTML!!! ";
      color: blue;
    }
    /* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::after {
      content: " CSS3!!!";
      color: red;
    }

    /* 드래그한 콘텐츠를 선택한다 */
    ::selection {
      color: red;
      background: yellow;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo illum sunt distinctio sed, tempore, repellat rerum et ea laborum voluptatum! Quisquam error fugiat debitis maiores officiis, tenetur ullam amet in!</p>
</body>
</html>

 

 

결과:

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.