wms's Programming&Study

[CSS] CSS 선택자② - 가상클래스선택자, 부모자식선택자 본문

Programming/CSS

[CSS] CSS 선택자② - 가상클래스선택자, 부모자식선택자

wms2275 2019. 9. 29. 03:23

[가상 클래스 선택자 (Pseudo-classes Selector)]
- 가상 클래스 선택자는 요소의 상태나 상황에 따라 선택하는 방법.
  링크의 경우 방문하기 전, 방문 후, 링크 위에 마우스를 올려놓거나
  포커스 등의 상황을 선택하여 스타일을 지정할 수 있다.
  또한 언어에 따른 구분이나 마크업 구조에 따라 특정 요소를 선택할 수 있다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>가상 클래스 선택자 - Pseudo Classes Selector</title>
		<style>
			a:link {
				color:				#0000FF;
				text-decoration:	none;
			}
			a:visited {
				color:				#FF00FF;
				text-decoration:	none;
			}
			a:hover {
				color:				#FF0000;
				text-decoration:	underline;
			}
		</style>
	</head>
	<body>
		<h1>가상 클래스 선택자</h1>
		<a href="id.html">다음 홈페이지</a>
		<p>가상 클래스 선택자는 상황에 따라 요소를 선택하여 스타일을 지정한다.</p>
	</body>
</html>

▶ 결과화면

 

[가상 요소 선택자 (Pseudo-element Selector)]

- 가상 요소 선택자는 요소의 첫글자나 첫줄 또는 요소 앞이나 뒤 등 가상의 영역을 선택하고자 할 때 사용한다.

E:first-line - E요소의 문자열 중 첫 번째 줄을 선택

E:first-letter - E요소의 문자열 중 첫 번째 문자를 선택

E:before - E콘텐츠 앞으로 생성된 가상 요소를 선택

E:after - E콘텐츠 뒤로 생성된 가상 요소를 선택

E:selection - 사용자 선택한 E요소의 범위를 선택

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>가상 요소 선택자 - Pseudo Element Selector</title>
		<style>
			p:first-letter {
				font-size:			5em;
				color:				#0000FF;
				background:			#FFFF00;
			}
		</style>
	</head>
	<body>
		<h1>가상 요소 선택자</h1>
		<p>가상 요소 선택자는 첫줄, 첫글자 등 요소의 가상 영역을 선택하여 스타일을 지정</p>
	</body>
</html>

▶ 결과화면

 

[하위 선택자 (Descendant Combinator)]

- 하위 선택자 방식은 선택자와 선택자를 공란으로 선언하며,

선행 선택자의 하위 요소 중 후행 선택자에 해당하는 요소를 선택하는 방법.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>하위 선택자 Descendant Combinator</title>
		<style>
			#main div {
				color:		#339933;
				border:		3px dotted currentcolor;
				background:	#FFFF00;
			}
			#main p {
				background:	#000000;
			}
		</style>
	</head>
	<body>
		<h1>하위 선택자</h1>
		<div id="main">
			<div>
				<p>하위 선택자는 선행 선택자의 하위 요소 중....</p>
			</div>
			<p>하위 선택자는 선행 선택자의 하위 요소 중....</p>
		</div>
	</body>
</html>

 

 

[자식 선택자 (Child Combinator)]

- 자식 선택자 방식은 선행 선택자인 부모 요소 하위에 포함된 후행 선택자인

자식 요소를 선택하는 방법.

이때 부모 선택자와 자식 선택자는 > 로 구분하여 선언한다.

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Insert title here</title>
     <style>
          #main > div {
            border:   3px solid red;
          }
          ul > li {
            list-style-type :  square;
            font-weight : bold;
            color : #FF0000;
          }
     </style>
   </head>
   <body>
      <h1>자식 선택자</h1>
      <p>선행 선택자인 부모 요소 하위에 포함된 후행 선택자인 자식 요소를 선택하는 방법.</p>
      <div id = "main">
         <div>
            #main의 자식 요소
               <div>
                  #main에 포함된 하위 요소
               </div>
         </div>
      </div>
      <br>
      <ol>
         <li>첫번째목록
            <ul>
               <li>첫번째하위목록
            </ul>
         </li>
         <li>두번째목록
            <ul>
               <li>두번째하위목록
            </ul>
         </li>
         <li>세번째목록
            <ul>
               <li>세번째하위목록
            </ul>
         </li>
      </ol>
   </body>
</html>

▶ 결과화면

 

[형제 선택자 (Sibling Combinator)]

- 형제 선택자는 기본 형제 선택자와 인접 형제 선택자로 구분한다.

기본 형제 선택자는 선행 선택자와 후행 선택자를 + 로 구분한다.

인접 형제 선택자는 ~ 로 구분한다.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <style >
        h1 + p {
          color :  #FF0000
        }
        h2 ~ p {
          color : #0000FF
        }
      </style>
   </head>
   <body>
      <h1>기본형제선택자</h1>
      <p>기본형제선택자</p>
      <p>기본형제선택자</p>
      <h1>기본형제선택자</h1>
      <h2>기본형제선택자</h2>
      <p>기본형제선택자</p>
      <p>기본형제선택자</p>
   </body>
</html>

▶ 결과화면

저작자표시 비영리 변경금지

'Programming > CSS' 카테고리의 다른 글

[CSS] CSS 선택자③ - 선택자의그룹화  (0) 2019.09.30
[CSS] CSS 선택자① - id선택자, 클래스선택자  (0) 2019.09.28
'Programming/CSS' Related Articles more