Central-IT의 프로그래밍 이야기

[CSS] 스타일 적용을 위한 CSS 선택자 본문

CSS

[CSS] 스타일 적용을 위한 CSS 선택자

Central-It 2020. 11. 15. 00:29
반응형

CSS 선택자란?

HTML 작성시 디자인을 위해 각 요소에 크기, 색상 등 스타일 적용 대상을 지정하는 것을 의미한다.

아래의 HTML 코드를 참고하여 선택자를 살펴보자.

 

<html>
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
</head>
<body>
    <p class="txt title">Central-IT1</p>
    <div class="txt" id="txt1">
        <p>Central-IT</p>
        <div>
            <p>Central-IT</p>
        </div>
    </div>
    
    <p class="txt title">Central-IT2</p>
    <div class="txt">
        <p>Central-IT</p>
        <div>
            <p>Central-IT</p>
        </div>
    </div>
    
    <div id="content">
      <ul>
        <li><a class="portal" href="http://www.daum.net">다음</a></li>
        <li><a class="portal" href="http://www.naver.com">네이버</a></li>
        <li><a href="http://www.google.com">구글</a></li>
        <li><a href="http://www.nate.com">네이트</a></li>
      </ul>
    </div>
</body>
</html>

 

1. 일반 선택자

선택자 종류 표시방법 표시 예 설명
전체선택자 * * 전체 요소를 선택
태그선택자 태그 div 태그의 이름으로 선택
class 선택자 태그.클래스명
.클래스명		 div.txt
.txt		 클래스명으로 선택
ID 선택자 태그#ID명
#ID명		 div#txt1
txt1		 ID 명으로 선택
자손선택자 선택자1 선택자2 .txt p 선택자1의 자손인 선택자2를 선택
자식선택자 선택자1 > 선택자2 .txt > div 선택자1의 자식인 선택자2를 선택
인접형제 선택자 선택자1 + 선택자2 .title + #txt1 선택자1 바로 뒤에 오는 선택자2를 선택
일반형제 선택자 선택자1 ~ 선택자2 .title ~ div 선택자1 뒤에 오는 선택자2를 선택
속성선택자 태그[속성] a[href] 해당 속성을 가진 태그를 선택
태그[속성="값"] a[href="/index"] 해당 속성의 값을 가진 태그 선택
태그[속성*="값"] a[href*="detail"] 속성의 값이 지정한 값을 포함하고 있는 태그선택
태그[속성^="값"] a[href^="http"] 속성의 값이 지정한 값으로 시작하는 태그선택
태그[속성$="값"] a[href$="com"] 속성의 값이 지정한 값으로 끝나는 태그선택

 

2. 가상클래스

종류 표시방법 표시 예 설명
구조적 선택자:first-child .txt:first-child 부모의 첫번째 자식인 선택자를 선택
선택자:last-child .txt:last-child 부모의 마지막 자식인 선택자를 선택
선택자:nth-child(숫자) .txt:nth-child(1) 부모의 n(숫자)번째 자식인 선택자를 선택
선택자:nth-last-child(숫자) .txt:nth-last-child(1) 부모의 뒤에서 n번째 자식인 선택자를 선택
선택자:first-of-type .txt:first-of-type 같은 유형의 첫번째 형제인 선택자를 선택
선택자:last-of-type .txt:last-of-type 같은 유형의 마지막 형제인 선택자를 선택
선택자:nth-of-type(숫자) .txt:nth-of-type(1) 같은 유형의 n번째 형제인 선택자를 선택
선택자:nth-last-of-type(숫자) .txt:nth-last-of-type(1) 같은 유형 중 뒤에서 n번째 형제인 선택자를 선택
선택자:empty .txt:empty 자식이 없는 선택자를 선택
행동 선택자:active .txt:active 선택자를 마우스로 클릭할 때
선택자:hover .txt:hover 선택자 위로 마우스 포인터를 올려 놓을 때
선택자:focus .txt:focus 선택자에 초첨이 맞춰질 때
링크 선택자:link .portal:link 방문 전 선택자(a 태그)를 선택
선택자:visited .portal:visited 방문 후 선택자(a 태그)를 선택

 

반응형

'CSS' 카테고리의 다른 글

CSS의 주석  (0) 2015.02.12
'CSS' Related Articles more
Comments