HTML & CSSCSS

CSS 선택자

css, css3, css selector

CSS 선택자 알아보기

연결 선택자

combination selector라고도 부른다.

  • 하위 선택자 : 지정한 하위 요소에 스타일 적용하기

예제 코드를 살펴보자

div p { color: blue }

여기서 div는 상위 요소 p는 하위 요소이다. 이 코드를 해석하자면 div 태그안에 있는 모든 p태그에 css 요소를 적용하겠다는 의미이다.

예제를 보면 ul태그 모두 section의 하위 요소에 속하기 때문에 모두 적용되는 것을 볼 수 있다.

  • 자식 선택자 : 자식 요소에만 스타일 적용하기

부모 요소의 자식 요소에만 스타일을 적용하는 방법도 있다.

section > p { color: blue }

하위 요소 전체가 아닌 section 요소 안에 포함된 p 요소 중 자식 p요소에만 스타일을 적용하겠다는 의미이다.

여기서는 container의 자식인 첫 번째 ul요소에만 스타일이 적용된다.

  • 인접 형제 선택자

문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일을 적용할 때 사용한다.

h1 + p { text-decoration: underline; }
  • 형제 선택자

인접 형제 선택자와 달리 모든 형제 요소에 적용된다. 인접 형제 선택자에선 ‘+’ 기호를 사용했다면 형제 선택자에선 ‘~’ 기호를 사용한다.

속성 선택자

  • ‘[속성]’ 선택자 : 지정한 속성에 스타일 적용

특정 요소에 스타일을 적용시킨다. 대괄호 사이에 찾으려는 속성을 넣으면 된다.

  • [속성 = 값] : 특정 값을 갖는 속성에 스타일 적용

위 예제에서

a[target="_blank"] { ... }

라고 입력하면 target=”_blank”인 링크를 찾아 스타일을 적용시킨다.

  • [속성 ~= 값] : 여러 값 중 특정 값이 포함된 소성에 스타일 적용

[속성 = 값]이 속성과 값이 정확히 일치하는 요소를 찾는다면 [속성 ~= 값]은 여러 속성 값 중 해당 값이 포함되어 있는 요소를 선택한다.

  • [속성 |= 값] : 특정 값이 포함된 속성에 스타일 적용

이 때 값은 한 단어로 같아야 한다. 단어가 포함된 하이픈 연결 단어도 스타일이 적용된다.

  • [속성 ^= 값] : 특정 값으로 시작하는 속성에 스타일 적용

^는 캐럿이라고 한다. 캐럿이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용시킨다.

  • [속성 $= 값] : 특정 값으로 끝나는 속성에 스타일 적용

반대로 $는 지정한 문자로 끝나는 속성에 스타일을 적용시킨다.

  • [속성 *= 값] : 값의 일부가 일치하는 속성에 스타일 적용

사용자가 지정한 속성 값의 위치에 관계없이 값이 포함되어 있으면 스타일이 적용된다.

가상 클래스와 가상 요소

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

사용자가 커서를 올린다던 지 클릭을 한다던지의 이벤트가 발생할 때 스타일이 바뀌도록 만들고 싶을 때 사용하는 것이 가상 클래스 선택자이다.

  1. :link

하이퍼링크 중 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 기본적으로 파란줄이 표시되는 것을 없애고 싶다거나 할 때에 사용한다.

  1. :visited

링크 중 한 번 이상 방문한 링크에 대해 스타일을 적용한다.

  1. :hover

요소에 마우스 커서를 올렸을 때 스타일을 지정한다. 롤오버 효과등이 그 예이다.

  1. :active

요소를 활성화 시켰을 때 스타일을 지정하는 요소이다.

  1. :focus

요소에 초점이 맞춰젔을 때 사용한다. 아이디를 입력하기 위해 텍스트 필드로 마우스 커서를 갖다 놓았을 때 등에 사용한다.

  • 주의할 점은 가상 클래스 선택자는 순서를 중요하게 해야한다. link, visited, hover, active 순으로 정의한다.
  • UI 요소 상태에 따른 가상 클래스

User Interface 요소에 상태에 따른 가상 클래스는 화면 디자인할 때 상태 스타일을 지정하기 위해 사용한다.

  1. :enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때

둘의 차이를 예제로 설명하자면 회원가입은 사용자가 텍스트를 작성해야 하기 때문에 enabled 상태, 약관 등은 disabled 상태로 표시해야 한다.

  1. :checked : 라디오, 체크 박스에서 항목을 선택했을 때
  • 구조 가상 클래스

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아서 스타일을 지정한다.

  1. :root

문서 전체에 적용한다.

  1. :nth-child(n) , nth-last-child(n) : 자식 요소의 위치에 따른 스타일 적용

특정 부분에 스타일을 적용하기 위해서는 보통 class나 id를 통해 이름을 붙여준다. 그러나 여러 개의 항목이 일렬로 나열되어 있다면, nth-child(n)을 사용하여 n번째 자식 요소에 스타일을 적용하거나 nth-last-child(n) 끝에서부터 n번째 자식 요소를 통해서 사용한다.
an+b 처럼 수식사용도 가능하다. 조금은 어려운 개념이므로 충분한 연습이 필요하다.
단, 위치에 따른 스타일 적용이기 때문에 해당 요소들이 모두 한 부모 요소를 가지고 있어야 한다.

다음 예제는 홀수 열에만 스타일을 적용시키는 예제이다.

  1. :nth-of-type(n), nth-last-of-type(n) : 특정 태그 위치에 스타일 적용하기
  1. :first-child, :last-child : 첫번째, 마지막 자식 요소에 스타일 적용하기
  1. :first-of-type, :last-of-type : 형제 관계 요소의 위치에 따른 스타일 적용

형제 관계 요소 중에서 첫번째, 마지막 요소에 스타일을 적용한다.

  1. :only-child, :only-of-type : 하나뿐인 자식 요소에 스타일 적용하기

부모 요소 중 자식 요소가 하나일 때 스타일을 적용한다. only-child는 다른 자식요소가 존재할 수 없고 only-of-type은 다른 자식 요소가 있어도 된다.

  • 그 외에 가상 요소
  1. :target : 앵커 목적지에 스타일 적용

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

  1. :not : 특정 요소가 아닐 때 스타일 적용
  • 가상 요소
  1. ::first-line, ::first-letter : 첫 번째 줄과 첫 번째 글자에 스타일 적용
  1. ::before, ::after : 내용 앞 뒤에 콘텐츠 추가하기

요소 앞 뒤에 텍스트, 이미지 등을 표시한다.

Share