<frontend> {08} </CSS 고급 선택자>

CSS 고급 선택자

• 연결 선택자
• 속성 선택자
• 가상클래스와 가상요소

 

 

 

---

1. 연결 선택자

• 하위선택자와 자식선택자

• 하위선택자: 부모요소에 포함된 하위요소를 모두 선택
  • 자손선택자라 불리며, 모든 하위요소에 적용

상위요소 하위요소

section p {}
상위요소(section)  하위요소(p)


ex)
	section p {color: blue;}
</style>
...
<section> /*section의 모든 하위 p 요소에 적용 가능*/
	<p> ... </p>
    <p> ... </p>

 

• 자식선택자
  • 자식선택자는 한단계 아래까지만 적용

부모요소 > 자식요소

ex)
	section > p {color: blue;}
</style>
...

 

---

 

웹 문서에서 부모요소가 같은 경우, 형제관계라 한다.

이때, 먼저 나오는 요소를 형, 나중에 나오는 요소를 동생 요소라 한다.

• 인접형제선택자와 형제선택자

• 인접 형제 선택자

요소1 + 요소2


ex)
	h1 + p {color: blue;}
</style>

...

	<p>...</p>  /* 첫번째 형제인 이곳만 적용됨*/
    <p>...</p>

 

• 형제 선택자

요소1 ~ 요소2


ex)
	h1 ~ p {color: blue;}
</style>

...
	/*모든 형제요소 p에 적용됨*/
	<p>...</p>  
    <p>...</p>

 

 

 

---

2. 속성 선택자

• 특정 속성이 있는 요소를 선택하는 [속성] 선택자

• 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
• 단어별 여러값 중 특정값이 포함된 요소를 택하는 [속성 ~= 값] 선택자
• 특정 속성값이 포함된 속성요소를 선택하는 [속성 |= 값] 선택자
• 특정값으로 시작하는 속성요소를 택하는 [속성 ^= 값] 선택자
• 특정값으로 끝나는 속성요소를 선택하는 [속성 $= 값] 선택자
• 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

Ex)
 /* href속성이 있는 a요소를 찾아 ...내용을 적용 */
a[href] {...}

/* <a target="_blank"> 인 요소를 찾아 ...를 적용 */
a[target = _blank] {...}

/*class값 중 button이 있는 요소에만 적용*/
[class ~= button] {...}

/* title 속성값에 us나 us-로 연결된 속성값이 있는 a요소를 찾아 적용 */
a[title |= us] {...}

/* title 속성값이 eng로 시작하는 a요소를 찾아 적용 */
a[title ^= eng] {...}

/* href에 링크된 파일이름의 마지막 단어가 xls를 찾아 적용 */
[href $= xls] {...}

/* href속성값 중 'w3' 이 포함된 요소 선택후 적용 */
[href *= w3] {...}

 

 

 

---

3. 가상클래스와 가상요소

• 가상 클래스
  • 사용자 동작에 반응하는 가상클래스
    • :link, :visited, :hover, :active, :focus

:link
 - 방문하지 않은 링크에 스타일을 적용

:visited
 - 방문한 링크에 스타일 적용

:hover
 - 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용

:active
 - 웹 요소 활성화 시, 스타일을 적용

:focus
 - 웹요소에 초점이 맞춰졌을 때, 스타일 적용

<style>	
    .navi ul li {
    	float: left;
        width: 150px;
        padding: 10px;
    }
    .navi a:link, .navi a:visited {
    	display: block;
        font-size: 14px;
        color: #000;
        padding: 10px;
        text-decoration: none;
        text-align: center;
    }
    .navi a:hover, .navi a:focus {
    	background-color: #222;
        color: #fff;
    }
    .navi a:active {
    	background-color: #f00;
    }
</style>

	<nav>
    	<ul>
        	<li><a href="#">이용안내</a></li>
            <li><a href="#">객실소개</a></li>
            <li><a href="#">예약방법 및 요금</a></li>
            <li><a href="#">예약하기</a></li>
        </ul>
    </nav>​

- 마우스를 위로 올리면 검은색으로 바뀌고, 클릭하면 붉은색으로 바뀜

• • 요소 상태에 따른 가상클래스: for 화면에서 요소상태에 따라 스타일 적용
    • :target 가상클래스 선택자
    • :enabled, :disabled 가상클래스 선택자
    • :checked 가상클래스 선택자
    • :not 가상클래스 선택자

📌 앵커 대상에 스타일 적용하기 (:target)

<style>
	#intro:target {
    	background-color: #0069e0;
        color: #fff;
    }
</style>

	<nav class="navi">
    	<ul>
        	<li><a href="#intro">이용 안내</a></li>
            <li><a href="#intro">객실 소개</a></li>
            <li><a href="#intro">예약방법 및 요금</a></li>
            <li><a href="ps-2.html">예약하기</a></li>
        </ul>
    </nav>
    <div id="intro" class="contents">
    	<h2>이용안내</h2>
        ...
    </div>
    <div id="intro" class="contents">
    	<h2>예약방법 및 요금</h2>
        ...
    </div>​

📌 선택된 라디오 버튼의 스타일 적용하기 (:checked)

<style>
	#signup input:checked + label {
    	color: red;
        font-weight: bold;
    }
</style>


	<ul>
        <li>
        	<input type="radio" name="room" id="basic">
            <label for="basic">기본형(최대 2인)</label>
        <li>
        <li>
        <input type="radio" name="room" id="family">
            <label for="basic">가족형(최대 8인)</label>
        </li>
    </ul>​

•  
•  
  • 구조 가상클래스
    • 특정위치의 자식요소 선택하기
      • :only-child
      • A:only-type-of
      • :first-child
      • :last-child
      • A:first-of-type
      • A:first-of-type
      • :nth-child(n)
      • nth-last-child(n)
      • A:nth-of-type(n)
      • A:nth-last-of-type(n)
    • 수식을 사용해 위치 지정하기

/* div요소에서 3번째 자식인 p요소에 스타일 적용 */
div p:nth-child(3)

/* div요소에서 홀수번째로 나타나는 자식인 p요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)

 

 

 

 

 

 

 

---

• 가상 요소
  • ::first-line, ::first-letter 요소
    • 첫번째 줄, 첫번째 글자에 스타일 적용
  • ::before, ::after 요소
    • 내용 앞뒤에 콘텐츠를 추가

 

 

<style>
	li.new::after{
    	content: "NEW!"
        font-size: x-small;
        padding: 2px 4px;
        margin: 0 10px;
        border-radius: 2px;
        background: #f00;
        color: #fff;
    }
</style>
...
<div class="container">
	<h1>제품 목록</h1>
    <ul>
    	<li class="new">제품 A</li>
        <li>제품 B</li>
        <li>제품 C</li>
        <li class="new">제품 D</li>
    </ul>
</div>