22-09-15(1)-TIL

CSS Selector 심화

속성 선택자

태그[속성이름]

속성이름 에 해당하는 속성을 가진 태그 모두 선택

/* 1. 태그[속성이름] */
/* 속성명으로 선택 */
div[class] {
	font-size: 10px;
}

태그[속성이름="변수"]

속성이름 에 해당하는 값이 변수 와 일치하는 태그 선택

/* 2. 태그[속성이름="변수"] */
a[href="www.naver.com"] {
	font-size: 32px;
}

태그[속성이름~="변수"]

속성이름 에 해당하는 값이 변수 를 하나의 완전한 단어로 포함하는 태그 선택

/* 3. 태그[속성이름~="변수"] */
a[class~="weniv"] {
	font-size: 32px;
}

태그[속성^="변수"]

속성 의 속성값이 변수로 시작하는 태그를 선택

/* 4. 태그[속성이름^="변수"] */
a[href^="http"] {
	font-size: 32px;
}

태그[속성$="변수"]

속성 의 속성값이 변수로 끝나는 요소를 선택

/* 5. 태그[속성$="변수"] */
a[href$=".png"] {
	font-size: 32px;
}

태그[속성*="변수"]

속성 의 속성값이 변수를 포함하는 태그를 선택

/* 6. 태그[속성*="변수"] */
a[href*="weniv"] {
	font-size: 32px;
}

태그[속성이름~="변수"] 와 태그[속성*="변수"] 차이점??

태그[속성이름~="변수"] 는 단어 기준으로 완전한 단어로만 포함
태그[속성*="변수"] 는 문자열 기준으로 판단 (단어가 포함만 되어있으면 됨)

태그[속성|="변수"]

속성 의 속성값이 변수이거나 변수로 시작하면서 뒤에 바로 - 기호가 있는 태그를 선택

/* 7. 태그[속성|="변수"] */
a[href|="weniv"] {
	font-size: 32px;
}

가상 클래스 선택자 (Pseudo class selector)

실제 html에 존재하지 않는 클래스지만 클래스가 존재하는 것처럼 작동
(콜론이 1개!!!)

<li class="foo">1</li>
<li class="foo">2</li>

.foo:first-child
	class="foo" 엘리먼트 중 첫 번째 자식 선택
    
.foo:nth-child(3)
	class="foo" 엘리먼트 중 3번째 자식 선택
    
.foo:nth-child(odd)
	홀수 번째 자식 선택
    
.foo:nth-child(even)
	짝수 번째 자식 선택
    
.foo:nth-child(n)
	n번째 자식 모두 선택 (0,1,2,3,4...)
    
.foo:nth-child(3n)
	3번째 자식마다 선택 (3*0, 3*1, 3*2...)
    
a:visited
	방문한 적 있는 링크 선택
    

상호 작용을 위한 가상 클래스

:hover

마우스를 올렸을 때 적용
button:hover {

}

:active

요소 실행할 때 적용 (버튼을 누르거나 링크 클릭)
a:active {

}

:focus

요소에 포커스가 있을 때 적용
클릭 가능한 요소들에도 적용 가능
input:focus {

}

:checked

선택한 상태의 라디오, 체크박스 요소 나타냄
input:checked+label {

}

가상 요소 선택자

::before

요소의 첫 번째 자식으로 HTML 코드에 존재하지 않는 가상요소를 생성
/*p 태그 첫번째 자식*/
p::before {
	content: "이번달 월급은";
}

::after

요소의 맨 마지막 자식
/*p 태그 마지막 자식*/
p::after {
	content: "만원;
}

::selection

선택하여 하이라이트 된 상태의 텍스트 선택
/*p 태그 마지막 자식*/
p::selection {
	color: gold;
    background-color: red;
}

/*선택자와 결합*/
strong::selection {
	color: red;
    background-color: blue;
}

가상 요소 선택자 (::) vs 가상 클래스 선택자 (:)
가상 요소 선택자 : 마크업 없는 요소를 삽입
가상 클래스 선택자 : 클래스 없는 요소에 클래스 삽입

CSS Combinator (복합 선택자)

자손 콤비네이터

하위 선택자는 공백을 사용
section 태그 아래 존재하는 모든 ul 태그
모든 하위 요소

section ul {
}

자식 콤비네이터

>를 사용
바로 밑 태그 (바로 아래 하위 요소에만 적용)

section > ul {
}

<section class="foo">
	<header>
		<h1>hello</h1>
		<p>header 밑 p</p>
	</header>
	<p>AAAAA</p>
</section>

<!-- AAAAA가 선택 (.foo > p 인 경우 foo의 직계자식 p의 AAAAA가 선택) -->

인접 형제 콤비네이터

같은 부모를 가짐
+ 기준 전방 선택자와 후방 선택자 (직후) 선택

<h1>hello world</h1>
<ul>
    <li>hello1</li>
    <li>hello1</li>
</ul>
<ul>
    <li>hello</li>
    <li>hello</li>
</ul>

h1과 바로 직후 ul 태그 선택

일반 형제 콤비네이터

~ 기준 앞 요소 이후에 나오는 모든 뒤 요소를 선택 (형제)

    <h1>hello world</h1>
    <ul>
        <li>hello world 2</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <ul>
        <li>hello world 3</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <h2>hello world</h2>
    <ul>
        <li>hello world 4</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <div>

h1과 형제인 모든 뒤 요소 ul 태그를 선택하지만 div 안에 존재하는 ul 태그는 형제 관계가 아님