CSS 고급 선택자

 

CSS 기본 선택자

종류	사용 방법	설명
전체 선택자	* {속성선언;}	모든 태그에 스타일을 적용한다.
타입 선택자	태그 {속성선언;}	지정한 태그에 스타일을 적용한다.
클래스 선택자	.클래스이름 {속성선언;}	지정한 클래스에 스타일을 적용한다.
아이디 선택자	#아이디 {속성선언;}	지정한 아이디에 스타일을 적용한다.
속성 선택자	[속성] {속성선언;} [속성=값] {속성선언;}	지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다.

그룹 선택자 : 쉼표로 여러 선택자를 한꺼번에 정의해줄 수도 있다.

+클래스 그룹 선택자

.a, .b, .c{} : 콤마는 각각의 항목을 or로 적용한다.

.a  .b  .c{} : 뒤에 나온 선택자가 하위 개체로 지정된다.(A요소 내부의 B요소 내부에 있는 C요소에만 적용 가능)

.a.b.c{}     : class="a b c" 처럼 모든 속성을 한번에 적용시킨다.

 

연결 선택자

연결 선택자(컴비네이션 선택자, 조합 선택자) : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자.

 

하위 선택자 : 부모 요소에 포함된 모든 하위 요소에 적용

상위요소 하위요소{ }	//띄어쓰기로 적어준다.

 

자식 선택자 : 자식요소에 스타일을 적용(바로 아래 자식만 가능)

부모요소 > 자식요소{  }	//부모요소에서 바로 아래 자식요소만. 여러번> 적용> 할수도> 있음

//고를수도 있음
ul > li:nth-child(1)  //ul의 요소 중 li의 첫번째 자식들만

 

인접 형제 선택자 : 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용(여러번+적용+가능)

요소1 + 형제요소 {  }
h1 + p {  }     //h1의 형제인 p요소 중 첫번째 p

 

형제 선택자 : 모든 형제 요소들에 스타일 적용

요소1 ~ 형제요소 {  }
h1 ~ p {  }    //h1의 형제인 모든 p 요소에 적용

 

[속성] 선택자 : 지정한 속성을 가진 요소를 찾아 스타일 적용

a[href] {  }  //a태그에 target이라는 속성을 가진 요소를 선택한다.(태그 생략가능)
<ul>
  <li><a href="#">메뉴 1</a></li>    //여기서 href는 하이퍼링크 태그임

 

[속성 = 값] 선택자 : 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

a[target="_blank"] {  }
<ul>
  <li><a href="#" target="_blank">내용</a></li>

 

[속성~=값] 선택자 : 여러 속성 값 중에 '해당 값'이 포함되어 있는 요소를 찾아 스타일 적용

a[class~="button"] {  }   //a태그이면서 클래스에 'button'이 들어간 것
<ul>
   <li><a href="#" class="flat button">내용</a></li>

 

[속성 |=  값] 선택자 : 특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

a[title |= "us"] {   }   //속성값이 'us'이거나, 'us-'로 시작하는 요소에 적용

 

[속성^=값] 선택자 : 특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

([속성 |=  값]과 달리, '-'가 아닌 다른 어떤게 와도 적용해줌.)

a[title ^="eng"] {   }
<ul>
  <li><a href="#" title="english">영어</a></li>

 

[속성 $=  값] 선택자 : 특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

a[href$=hwp] {  }
<ul>
  <li><a href="intro.hwp">hwp 파일</a></li>

 

[속성*=값] 선택자 : 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용(앞뒤로 다른 텍스트 붙어있어도 적용해줌)

a[href *= "w3"] {  }
<ul>
  <li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>

 

 

가상 클래스 선택자

순서 중요 :link → :visited → :hover → :active

:link - 방문하지 않은 링크에 스타일 적용
:visited - 방문한 링크에 스타일 적용
:active - 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경
:hover - 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경
:focus - 마우스로 해당 요소를 클릭하면 요소의 스타일 변경

:target - 앵커로 연결된 부분에 스타일 적용 (앵커 : 각 태그로 이동되는 것.)

 #room:target { background-color: #주황색; }
 
<ul>
  <li><a href="#room">객실 소개</a></li>   //얘를 누르면
  ...
<div id="room" class="contents">      //얘가 주황색이 됨.
  <h2>객실 소개</h2>

 

:enabled, :disabled - 요소의 사용 여부에 따라 스타일 적용

(ex.텍스트창에 텍스트를 적거나, 체크박스에 체크를 하는 등)

input:enabled{   }

:checked - 라디오 버튼이나 체크 박스에 체크했을 때 스타일 적용

:not - 특정 요소를 제외하고 스타일 적용

#signup input:not([type=radio]):hover { border-color: #f00; }
//input중에서 radio타입만 빼고, 마우스를 올렸을때 border의 색깔을 바꾼다.

 

문서 구조에 따른 가상 클래스 선택자

 

 

 

 

가상 요소

화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상 요소 사용
::first-line : 특정 요소의 첫번째 줄에 스타일 적용
::first-letter : 특정 요소의 첫번째 글자에 스타일 적용
::before : 특정 요소의 앞에 지정한 콘텐츠 추가
::after : 특정 요소의 뒤에 지정한 콘텐츠 추가

li.new::after {
      content:"NEW!!";
      font-size:x-small;
      padding:2px 4px;
      ...