[ CSS ] 정말 정말 중요한 CSS 선택자

PROGRAMMING/HTML, CSS 2022. 5. 17. 21:18

하루입니다.

중요한 이유 : 자바스크립트를 사용할 때 값들을 선택하고 조작해야 한다. 조작하기 위해선 일단 선택할 수 있어야 하고 그게 selector 선택자다. 외워야 한다.

선택자란(Selector)? CSS에서 스타일을 적용할 HTML 요소를 선택하기 위해서 사용하는 것

기본 선택자

전체 선택자

* { color: red; }
HTML 문서의 모든 엘리먼트(태그)를 선택한다.
사용목적 : 스타일 리셋에 사용한다.

* { color: red; }

태그 선택자

태그명 { color: red; }
HTML 문서에서 해당 태그를 모두 선택한다.

p { color: red; }

HTML 문서의 모든 p 엘리먼트를 선택한다.

아이디 선택자

#아이디속성값 { color: red; }
HTML 문서에서 id속성값이 일치하는 엘리먼트를 하나 선택한다.

#wrapper { color: red; }

HTML문서에서 id속성값이 wrapper인 엘리먼트를 선택한다.

클래스 선택자

.클래스속성값 { color: red; }
HTML 문서에서 클래스 속성값이 일치하는 엘리먼트를 전부 선택한다.

.movie-poster { border: 1px solid red; width:300px; height: 250px; }

HTML문서에서 클래스속성값에 movie-poster가 포함된 엘리먼트를 선택한다.

그룹 선택자

선택자1, 선택자2, 선택자3 { color: red; }
HTML 문서에서 선택자1, 선택자2, 선택자 3에 해당하는 모든 엘리먼트를 선택한다.

tfooter, .priceText, .danger-text { font-weight: bolder; }

HTML 문서에서 태그명이 tfooter인 엘리먼트, 클래스 속성값에 price-text나 danger-text를 포함하고 있는 모든 엘리먼트를 선택한다.

자손, 자식, 형제 선택자

자손 선택자

선택자1 선택자2 { color: red; }
HTML 문서에서 선택자1에 해당하는 엘리먼트에 포함된 엘리먼트들 중에서 선택자2에 해당하는 모든 엘리먼트를 선택한다.

#boxoffice p { color: red; }
		예) <div id="boxoffice">
			<p>이 엘리먼트가 선택된다.</p>
			<div>
				<h3></h3>
				<p>이 엘리먼트가 선택된다.</p>
				<p>이 엘리먼트가 선택된다.</p>
			</div>
		   </div
           
id가 boxoffice인 엘리먼트 밑의 모든 p들이 선택된다.

자식 선택자

선택자1 > 선택자2 { color: red; }
HTML 문서에서 선택자1에 해당하는 엘리먼트의 바로 아래에 위치하고 있는 자식 엘리먼트들 중에서 선택자2에 해당하는 모든 엘리먼트를 선택한다.

#boxoffice > p { color: red; }
		예) <div id="boxoffice">
			<p>이 엘리먼트가 선택된다.</p>
			<div>
				<h3></h3>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
			</div>
		   </div
           
id가 boxoffice인 엘리먼트 바로 아래에 위치한 p만 선택된다.

일반 형제 선택자

선택자1 ~ 선택자2 { color: red; }
HTML 문서에서 선택자1에 해당하는 엘리먼트와 부모 엘리먼트가 같은 엘리먼트들 중에서 선택자1 엘리먼트보다 뒤에 있는 엘리먼트들 중에서 선택자2에 해당하는 엘리먼트를 전부 선택한다.

h3 ~ p { color: red}
		예) <div>
			<h2></h2>
			<p></p>
			<h3></h3>
			<p>이 엘리먼트가 선택된다.</p>
			<p>이 엘리먼트가 선택된다.</p>
		   </div>
           
h3엘리먼트와 <부모가 같으면서도 자기보다 뒤에 있는> 모든 p엘리먼트를 선택한다.

인접 형제 선택자

선택자1 + 선택자2 { color: red; }
HTML 문서에서 선택자1에 해당하는 엘리먼트와 부모 엘리먼트가 같은 엘리먼트들 중에서 선택자1 엘리먼트 바로 다음에 있는 선택자2에 해당하는 엘리먼트를 선택한다.

h3 + p { color: red}
		예) <div>
			<h2></h2>
			<p></p>
			<h3></h3>
			<p>이 엘리먼트가 선택된다.</p>
			<p>이 엘리먼트는 선택되지 않는다.</p>
		   </div>
           
h3엘리먼트와 <부모가 같으면서도 자기보다 뒤에 있는> p인 엘리먼트를 선택한다.
p가 있더라도 앞에 있거나 뒤뒤에 있는 경우는 선택되지 않는다.

의사(pseudo) 클래스 선택자 혹은 필터 선택자

필터 선택자 (구조 의사 클래스 선택자)

HTML요소의 계층 구조에서 특정 위치에 있는 엘리먼트를 선택할 수 있다.

선택자1:first-child { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 첫번째 자식 엘리먼트를 선택한다.

p:first-child {color:red; }
			<div>	
		   		<p>이 엘리먼트가 선택된다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
			</div>
			<div>
		   		<p>이 엘리먼트가 선택된다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
			</div>
    
p엘리먼트 중에서 부모 엘리먼트의 첫번째 자식엘리먼트를 선택한다.

선택자1:last-child { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 마지막 자식 엘리먼트를 선택한다.

p:last-child {color:red; }
	예) <div>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트가 선택된다.</p>
	    </div>
    	    <div>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트는 선택되지 않는다.</p>
				<p>이 엘리먼트가 선택된다.</p>
	    </div>

p엘리먼트 중에서 부모 엘리먼트의 마지막번째 자식엘리먼트를 선택한다.

선택자1:nth-child(n) { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 n번째 자식 엘리먼트를 선택한다.

p:nth-child(2) { color: red;}

        예) <div>
                <p>이 엘리먼트는 선택되지 않는다.</p>
                <p>이 엘리먼트가 선택된다.</p>
                <p>이 엘리먼트는 선택되지 않는다.</p>
                <p>이 엘리먼트는 선택되지 않는다.</p>
            </div>
            <div>
                <p>이 엘리먼트는 선택되지 않는다.</p>
                <p>이 엘리먼트가 선택된다.</p>
                <p>이 엘리먼트는 선택되지 않는다.</p>				
            </div>
           
p엘리먼트 중에서 부모 엘리먼트의 2번째 자식엘리먼트를 선택한다.

선택자1:nth-child(odd) { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 홀수번째 자식 엘리먼트를 선택한다.

p:nth-child(odd) { color: red;}

    예) <div>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
         </div>
        <div>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>				
        </div>

p엘리먼트 중에서 부모 엘리먼트의 홀수번째 자식엘리먼트를 선택한다.

선택자1:nth-child(even) { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 짝수번째 자식 엘리먼트를 선택한다.

p:nth-child(odd) { color: red;}

    예) <div>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
        </div>
        <div>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>				
        </div>

p엘리먼트 중에서 부모 엘리먼트의 짝수번째 자식엘리먼트를 선택한다.

선택자1:nth-child(3n) { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 3n번째(3번째, 6번째, 9번째, ..) 자식 엘리먼트를 선택한다.

p:nth-child(3n) { color: red;}

    예) <div>
            <p>이 엘리먼트는 선택되지 않는다.</p>				
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>				
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>		
       </div>
           
 p엘리먼트 중에서 부모 엘리먼트의 3번째, 6번째, 9번째 자식엘리먼트를 선택한다.

선택자1:nth-child(3n + m) { color: red;}
HTML 문서에서 선택자1에 해당하는 엘리먼트 중에서 부모 엘리먼트의 3n + m번째(3+m번재, 6+m번째, 9+m번째, ..) 자식 엘리먼트를 선택한다.

p:nth-child(3n+1) { color: red;}
    예) <div>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>				
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>				
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>
            <p>이 엘리먼트가 선택된다.</p>
            <p>이 엘리먼트는 선택되지 않는다.</p>		
        </div>
        
p엘리먼트 중에서 부모 엘리먼트의 1번째, 4번째, 7번째, 10번째 자식엘리먼트를 선택한다.

가상 선택자 (동적 의사 클래스 선택자)

링크의 상태나 마우스의 움직임에 따라서 엘리먼트를 선택할 수 있다.

a:link { color: black; text-decoration: none;}
사용자가 한번도 이 링크를 통해서 페이지를 방문한 적이 없는 a태그를 선택한다.

a:visited { color: black; text-decoration: none;}
사용자가 한번이라도 이 링크를 통해서 페이지를 방문한 적이 있는 a태그를 선택한다.

a:hover { color: blue; text-decoration: underline;}
사용자의 마우스 포인트가 올라와 있는 a태그를 선택한다.

a:active { color: blue; text-decoration: underline;}
사용자가 마우스로 링크를 클릭하고 있는 a태그를 선택한다.

* :link, :visited, :active, :hover은 a 태그를 대상으로 사용되는 선택자다.
* :hover은 a 태그 이외의 태그에서도 사용되는 선택자다.
* :focus는 폼 입력요소를 대상으로 사용되는 선택자다.

선택자1:hover { color: red;}
선택자1에 해당하는 엘리먼트 중에서 마우스포인트가 올라와 있는 엘리먼트를 선택한다.

img {opacity: 0.5;}
img:hover {opacity: 1;}

이미지 엘리먼트 중에서 마우스포인트가 올라와 있는 이미지 엘리먼트의 투명도를 1로 설정한다.
opacity는 0에 가까울수록 투명하다.

선택자1:focus { color: red;}
선택자1에 해당하는 엘리먼트 중에서 포커스를 획득한 엘리먼트를 선택한다.

input {border: 1px solid #ddd; outline:none;}
input:focus {border: 1px solid green; }

input 엘리먼트중에서 포커스를 획득한 엘리먼트를 선택해서 테두리 색을 변경한다.

속성 선택자

[속성명]
지정된 속성이 포함된 모든 엘리먼트를 선택한다.

[title] { color: red; }
예) <a href="about.html" title="회사소개">이 엘리먼트는 선택된다.</a>

엘리먼트 중에서 title 속성을 가지고 있는 모든 엘리먼트를 선택한다.

[속성명='값']
지정된 속성을 가지고 있고, 해당 속성의 값이 일치하는 모든 엘리먼트를 선택한다.

input[type='password'] { color:red; }
예) 이름     : <input type="text" name="name" />    이 엘리먼트는 선택되지 않는다.
비밀번호     : <input type="password" name="pwd" /> 이 엘리먼트는 선택된다.

input엘리먼트 중에서 type속성값이 password인 엘리먼트를 선택한다.

[속성명^='값']
지정된 속성을 가지고 있고, 해당 속성의 값이 지정된 값으로 시작하는 모든 엘리먼트를 선택한다.

a[href^='http://'] {color: red; }
<a href="http://www.daum.net">이 엘리먼트는 선택된다</a>

[속성명$='값']
지정된 속성을 가지고 있고, 해당 속성의 값이 지정된 값으로 끝나는 모든 엘리먼트를 선택한다.

a[href$=".hwp"] {background-image: url('icons/hwp.png'); }
<a href="files/휴가신청서.hwp">휴가신청서</a> 		한글아이콘 이미지가 표시된다.

[속성명*='값']
지정된 속성을 가지고 있고, 해당 속성의 값에 지정된 값이 포함된 모든 엘리먼트를 선택한다.

a[title*="워치"] {color: red;}
	<a href="" title="갤럭시 워치">이 엘리먼트는 선택된다.</a>
	<a href="" title="갤럭시워치">이 엘리먼트는 선택된다.</a>

[속성명~='값']
지정된 속성을 가지고 있고, 해당 속성의 값에 지정된 값이 다른 글자와 구분되는 하나의 단어로 포함된 모든 엘리먼트를 선택한다.

a[title~="워치"] {color: red;}
	<a href="" title="갤럭시 워치">이 엘리먼트는 선택된다.</a>
	<a href="" title="갤럭시워치">이 엘리먼트는 선택되지 않는다.</a>

상태 의사 클래스 선택자

checked
체크박스, 라디오 버튼 중에서 체크된 엘리먼트를 선택한다.
disabled
폼입력요소(input, select, textarea, button) 등에서 비활성된 엘리먼트를 선택한다.
뭐가 선택되었는지 알고, 보이게 할 건지 안 보이게 할 건지 등을 행하기 위해 상태를 알아야 한다. 그럴 때 사용한다.

input:checked + label{font-weight: bold;  color: red; }

input:disabled + label{text-decoration: line-through;}

기타 선택자

선택자1:not(선택자2)
선택자1에 해당하는 엘리먼트 중에서 선택자 2에 해당하지 않는 엘리먼트를 선택한다.

/* 아이디속성값이 list-friends인 엘리먼트의 자손 엘리먼트 중에서 li엘리먼트면서 첫번째 자식이 아닌 엘리먼트를 찾는다. */
#list-friends li:not(:first-child) { text-decoration: line-through; }
예)    <ul id="list-friends">
          <li>이 엘리먼트는 선택되지 않는다.</li>
          <li>이 엘리먼트는 선택된다</li>
          <li>이 엘리먼트는 선택된다</li>
          <li>이 엘리먼트는 선택된다</li>

정말 중요하니!!! 암기합시다!!!

잘못된 정보에 대한 지적은 언제나 환영입니다.

복습 끝!

'PROGRAMMING > HTML, CSS' 카테고리의 다른 글

[ JSP ] 도서 검색(페이징 처리), 도서 상세정보(리뷰 조회) (0)	2022.06.02
[ CSS ] CSS 선택자 사용할 때 주의사항과 팁 (0)	2022.05.17
[ CSS ] float, clear (0)	2022.05.16
세상에서 가장 허접한 작은 홈페이지 만들기 (0)	2022.05.16
[ CSS ] CSS 우선순위, color, text style, 박스모델, 위치지정방식 (0)	2022.05.13

ABOUT ME

하루 하루

기본 선택자

전체 선택자

태그 선택자

아이디 선택자

클래스 선택자

그룹 선택자

자손, 자식, 형제 선택자

자손 선택자

자식 선택자

일반 형제 선택자

인접 형제 선택자

의사(pseudo) 클래스 선택자 혹은 필터 선택자

필터 선택자 (구조 의사 클래스 선택자)

가상 선택자 (동적 의사 클래스 선택자)

속성 선택자

상태 의사 클래스 선택자

기타 선택자

'PROGRAMMING > HTML, CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

기본 선택자

전체 선택자

태그 선택자

아이디 선택자

클래스 선택자

그룹 선택자

자손, 자식, 형제 선택자

자손 선택자

자식 선택자

일반 형제 선택자

인접 형제 선택자

의사(pseudo) 클래스 선택자 혹은 필터 선택자

필터 선택자 (구조 의사 클래스 선택자)

가상 선택자 (동적 의사 클래스 선택자)

속성 선택자

상태 의사 클래스 선택자

기타 선택자

'PROGRAMMING > HTML, CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바