[CSS] 기타 셀렉터

직속 자식 셀렉터 (direct children)

">"로 구분한 HTML의 계층 구조의 구조적 표현으로, A>B일 경우에 B 요소는 반드시 A의 1depth 안에 존재해야 한다.

<p>
	<div>
		<fieldset>
			<input type="text" />
			<input type="password" id="pwd">
			<input type="checkbox" />
		</fieldset>
	</div>
</p>

p>div>fieldset>#pwd {

}

---

자식 셀렉터 (children)

공백으로 구분하여 태그의 구조를 표현한다.
직속 자식 셀렉터가 반드시 1depth 안에 존재해야 했다면, 자식 셀렉터는 depth를 제한하지 않는다.
명시 과정에서 중간 단계 생략이 가능하며, 몇 depth를 더 내려가던, 지정한 태그 범위 안에 존재하기만 하면 된다.

<p>
	<div>
		<fieldset>
			<input type="text" />
			<input type="password" id="pwd">
			<input type="checkbox" />
		</fieldset>
	</div>
</p>

p div #pwd {

}

---

속성 셀렉터

태그 속성에 따른 표현

스타일 시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지에 대한 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있다.

<p>
	<div>
		<fieldset>
			<input type="text" />
			<input type="password" id="pwd">
			<input type="checkbox" />
		</fieldset>
	</div>
</p>

input[type] { /** type속성을 갖는 input 태그**/

}

---

여러 조건

여러 개의 클래스를 가진 태그를 선택할 때 사용한다. 두 셀렉터를 붙여서 작성하면 된다.

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
	color: blue;
}