CSS 선택자 ( CSS Selector )

주소 : https://flukeout.github.io/

https://flukeout.github.io/

참고 : https://www.w3schools.com/cssref/css_selectors.asp

1. 태그 선택자

  • 태그 자체를 선택합니다.
  • 사용 방법 : 태그 이름을 사용
    • div {}
      • div만 선택
    • div, span {}
      • div와 span을 선택
    • div span {}
      • div 안에 있는 span을 선택 ( 자손 선택 )
    • div > span {}
      • div 바로 밑에 있는 span을 선택 ( 자식 선택 )
    • div + span {}
      • div 바로 뒤에 있는 span을 선택
    • div ~ span {}
      • div 뒤에 있는 span을 선택

2. 아이디 선택

  • 지정된 id속성을 선택합니다.
  • 사용 방법
    • <div id="test"></div>
    • #test{}
  • id는 한 페이지에 1개만 사용되어야 합니다. (중복 불가)

3. 클래스 선택

  • 지정된 class 속성을 선택합니다.
  • 사용방법
    • <div class="test"></div>
      <div class="test"></div>
      <div class="test"></div>
      <div class="test"></div>
    • .test{}
  • class는 한 페이지에 여러개 사용될 수 있습니다.

4. 종합 예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	/* id : test */
	#test{
		border:1px solid #000;
		background:#09f;
		color:#fff;
		font-size:20px;
	}

	/* #test의 자손 div */
	#test div{
		text-align:center;
	}

	/* #test의 자식 div */
	#test>div{
		text-align:left;
		font-size:25px;
		margin:10px;
		background:#000;
	}

	/* #test의 첫번째 자식 div의 친구들 */
	#test .first~div{
		text-align:right;
		font-weight:bold;
		font-size:30px;
	}

	/* #test의 첫번째 자식 div의 단짝 */
	#test .first+div{
		font-size:40px;
	}

	/* class : test */
	.test{
		border:3px solid #000;
		font-size:30px;
		padding:30px;
	}
	.test .test{
		color:#06f;
		border-color:#06f;
	}
	.test .test .test{
		color:#60f;
		border-color:#60f;
	}
	.test .test .test .test{
		color:#f60;
		border-color:#f60;
	}
</style>
</head>
<body>
<div id="test">
	id : test입니다.
	<div>자식 div 입니다.
		<div class="first">자손 div 입니다.</div>
		<div>자손 div의 친구입니다.</div>
		<div>자손 div의 먼 친구입니다.</div>
	</div>
</div>
<div class="test">
	class : test
	<div class="test">
		inner test
		<div class="test">
			inner test of inner test
			<div class="test">
				inner test of inner test
			</div>
		</div>
	</div>
</div>
</body>
</html>
id : test입니다.

자식 div 입니다.

자손 div 입니다.
자손 div의 친구입니다.
자손 div의 먼 친구입니다.
class : test

class : test

class : test

class : test