roqkf

[CSS] Selector λ³Έλ¬Έ

πŸ’» Development/CSS

[CSS] Selector

ahyeon7 2022. 11. 27. 01:11

 

 

κΈ°λ³Έ μ…€λ ‰ν„°

1. 전체  μ…€λ ‰ν„°
	- λ¬Έμ„œμ˜ λͺ¨λ“  μš”μ†Œλ₯Ό 선택
    - * {}
    
2. νƒœκ·Έ μ…€λ ‰ν„°
	- 같은 νƒœκ·Έλͺ…을 κ°€μ§„ λͺ¨λ“  μš”μ†Œλ₯Ό 선택(λ³΅μˆ˜λ‘œλ„ 선택 κ°€λŠ₯)
    - h1 {}, div {}, section, h1 {}

3. ID μ…€λ ‰ν„°
	- #id
    
4. class μ…€λ ‰ν„°
	- 같은 classλ₯Ό κ°€μ§„ λͺ¨λ“  μš”μ†Œ 선택
    - .center
    
5. attribute μ…€λ ‰ν„°
	- 같은 속성을 κ°€μ§„ μš”μ†Œλ₯Ό 선택
    
6. μžμ‹ μ…€λ ‰ν„°
	- 첫 번째둜 μž…λ ₯ν•œ μš”μ†Œμ˜ λ°”λ‘œ μ•„λž˜ μžμ‹μΈ μš”μ†Œ
    - main > p {}
    - <main>
    	<p>(선택)
        	<span>
            	<p></p>(선택 μ•ˆ 됨)
            </span>
        </p>
        
        <p>(선택)
        	<span>
        		<p></p>(선택 μ•ˆ 됨)
        	</span>
        </p>
    </main>
    
7. 후손 μ…€λ ‰ν„°
	- 첫 번째둜 μž…λ ₯ν•œ μš”μ†Œμ˜ ν›„μ†κΉŒμ§€ 선택
    - main p {}
    - <main>
    	<p>(선택)
        	<span>
            	<p></p>(선택)
            </span>
        </p>
        
        <p>(선택)
        	<span>
        		<p></p>(선택)
        	</span>
        </p>
    </main>

8. ν˜•μ œ μ…€λ ‰ν„°
	- 같은 λΆ€λͺ¨ μš”μ†Œλ₯Ό κ³΅μœ ν•˜λ©΄μ„œ 첫 번째 μž…λ ₯ν•œ μš”μ†Œ 뒀에 μ˜€λŠ” 두 번째 μž…λ ₯ν•œ μš”μ†Œλ₯Ό λͺ¨λ‘ 선택
    - section ~ p {}
    - <main>
    <section></section>
    <p></p>(선택)
    <p></p>(선택)
    <p></p>(선택)
    </main>	
    
9. 인접 ν˜•μ œ μ…€λ ‰ν„°
	- 같은 λΆ€λͺ¨ μš”μ†Œλ₯Ό κ³΅μœ ν•˜λ©΄μ„œ 첫 번째 μž…λ ₯ν•œ μš”μ†Œ λ°”λ‘œ 뒀에 μ˜€λŠ” 두 번째 μž…λ ₯ν•œ μš”μ†Œ 선택
    - section + p {}
    - <main>
    <section></section>
    <p></p>(선택)
    <p></p>
    <p></p>
    </main>	

10. 기타 클래슀 μ…€λ ‰ν„°
	- a:link {} : μ‚¬μš©μžκ°€ λ°©λ¬Έν•˜μ§€ μ•Šμ€ <a> μš”μ†Œ 선택
    - a:visited {} : μ‚¬μš©μžκ°€ λ°©λ¬Έν•œ <a> μš”μ†Œ 선택
    - a:hover {} : 마우슀λ₯Ό μš”μ†Œ μœ„μ— μ˜¬λ Έμ„ λ•Œ 선택
    - a:active {} : ν™œμ„±ν™” 된(클릭된) μƒνƒœμΌ λ•Œ 선택
    - a:focus {} : ν¬μ»€μŠ€κ°€ 듀어와 μžˆμ„ λ•Œ 선택

'πŸ’» Development > CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

CSS μ• λ‹ˆλ©”μ΄μ…˜  (0) 2023.01.17
[CSS] λ ˆμ΄μ•„μ›ƒ display  (0) 2022.11.27
[CSS] Flexbox  (0) 2022.11.27
[CSS] λ°•μŠ€λͺ¨λΈ  (0) 2022.11.26
[CSS] 기초  (0) 2022.11.26