[CSS] - CSS 고급 선택자

개발 공부/HTML , CSS

[CSS] - CSS 고급 선택자

징_ 2023. 12. 18. 17:02

* 연결 선택자

선택자와 선택자를 연결해 적용 대상을 제한하는 선택자
컴비네이션 선택자(combination selector) 또는 조합 선택자라고 한다.

- 하위 요소에 스타일을 적용하는 하위 선택자 / 자식 선택자

하위 선택자(descendant selector)

부모 요소에 포함된 모든 하위 요소에 스타일이 적용
자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
하위 선택자를 정의할 때 상위 요소와 하위 요소를 나란히 씀
기본형

상위요소 하위요소

<예시>

...
  section p {color: blue; } /* section 요소의 모든 하위 p 요소를 파란색 글자로 지정 */
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <div>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
  </div>
</section>
...

자식 선택자(child selector)

자식 요소에 스타일을 적용하는 선택자
두 요소 사이에 >(부등호) 표시해 부모 요소와 자식 요소 구분
기본형

부모요소 > 자식요소

<예시>

...
  secton > p { color: blue; } /* section 요소의 자식인 p 요소를 파란색 글자로 지정 */
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>아직 온라인 예약 신청이...</p> /* p요소에만 스타일 적용 */
  <div>
    <p>가족실(2~4인): 60,000원/일</p>
    <p>도미토리(4인 공용): 25,000원/일</p>
  </div>
</section>
...

- 형제 요소에 스타일을 적용하는 인접 형제 선택자 / 형제 선택자

인접 형제 선택자(adjacent selector)

같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
요소 1과 요소 2 사이에 '+' 기호 사용
요소1과 요소2는 같은 레벨이면서 요소1 이후 첫번쨰 요소2에 적용
기본형

요소1 + 요소2

<예시>

...
  h1 + p {
    background-color: #222; /* 배경색은 검은색 */
    color: #fff;
  }
</style>
...
<section>
  <h1>예약 방법 & 이용 요금</h1>
  <p>아직 온라인 예약...</p> /* 첫 번쨰 동생요소에 스타일 적용 */
  <p>가족실(2~4인) : 60,000원/일</p>
  <p>도미토리(4인 공용) : 25,000원/일</p>
...

=> 부모 : section

형제 선택자(sibling selector)

형제 요소들에 스타일 적용
인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용됨
요소1과 요소2 사이에 기호 '~' 사용(선택 범위 아님)
기본형

요소1 ~ 요소2

<예시>

h1 ~ p {
  background-color: #222; /* 배경 검정 */
  color: #fff; 			  /* 글자 흰색 */
}
</style>
...
  <h1>예약 방법 & 이용 요금</h>
  /* p요소에 모두 적용 */
  <p>아직 온라인 예약...</p>
  <p>가족실(2~4)인 : 60,000원/일</p>
  <p>도미토리(4인 공용) : 25,000원/일</p>

* 속성 선택자

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

지정한 속성을 가진 요소를 찾아 스타일 적용
기본형

a[href] {...}

<예시>

...
 a[href] {					/* href 속성이 있는 a 요소를 찾는 선택자 */
   background: yellow;		/* 배경 노랑 */
   border: 1px solid #ccc;	/* 테두리 */
   font-weigt: normal;		/* 글꼴 굵기 */
 }
 </style>
 ...
 <ul>
   <li><a>메인 메뉴 : </a></li>
   <li><a href="#">메뉴 1</a></li>
   <li><a href="#">메뉴 2</a></li>
   <li><a href="#">메뉴 3</a></li>
   <li><a href="#">메뉴 4</a></li>
 </ul>
...

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

주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용
기본형

a[target = _blank] {...}

=> <a target="_blank">인 요소

<예제>

...
  a[href="_blank"] {		/* target 속성값이 _blank인 a요소를 선택하는 선택자 */
    padding-right: 30px;	/* 오른쪽에 패딩 지정 */
    background: url(images/newindow.png) no-repeat center right;  /* 배경 이미지 지정 */
  }
</style>
...
<ul>  
  <li><a href="https://html.spec.whatwg.org" target="_blank">HTML</a></li>
  <li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
  <li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
...

- 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

<예시>

[class ~= button] {...}

=> class값 중에 button에 있는 요소

...
  [class ~= "button"] { 
    box-shadow: rgba(0, 0, 0, 0.4) 4px 4px; /* 그림자 지정 */
    border-radius: 5px; /* 모서리 둥글게 지정 */
  }
</style>
...
<ul>
  <li><a href="#" class="flat">메뉴 1</a></li>
  <li><a href="#" class="flat">메뉴 2</a></li>
  <li><a href="#" class="button">메뉴 3</a></li>
  <li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
...

- 특정 속성값이 포함된 속성 요소를 선택하는 [속성 | = 값] 선택자

특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용
하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용

<예시>

a[title |= us] {...}

...
  a[title |= "us"] {  /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
    background: url(images/us.png) no-repeat left center;  
  }
  a[title |= "jap"] {  /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
    background: url(images/jp.png) no-repeat left center;
  }
  a[title |= "chn"] {  /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
	  background: url(images/ch.png) no-repeat left center;
  }
</style>
</head>

<body>
  <ul>
	  <li>외국어 서비스 : </li>
	  <li><a href="#" title="us-english">영어</a></li>
	  <li><a href="#" title="ja">일본어</a></li>
	  <li><a href="#" title="chn">중국어</a></li>
  </ul>
...

=> 일본어는 "ja"이기 때문에 속성값 "jap"랑 불일치해서 사진 첨부 안됨

- 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값] 선택자

특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

<예시>

a[title ^= eng] {...}

...
a[title ^="eng"] {  /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
  background: url(images/us.png) no-repeat left center;
  padding: 5px 25px;
}
a[title ^="jap"] {  /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
  background: url(images/jp.png) no-repeat left center;
  padding: 5px 25px;
}
a[title ^="chin"] {  /* 속성값이 "chn"로 시작하는 요소를 찾는 선택자 */
  background: url(images/ch.png) no-repeat left center;
  padding: 5px 25px;
}
</style>
</head>

<body>
  <ul>
	<li>외국어 서비스 : </li>
	<li><a href="#" title="english">영어</a></li>
	<li><a href="#" title="japanese">일본어</a></li>
	<li><a href="#" title="chinese">중국어</a></li>
  </ul>
...

- 특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자

특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

<예시>

[href $= xls] {...}

...
a[href$=hwp] { /* 연결한 파일의 확장자가 hwp인 링크 */
  background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
  padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}

a[href$=xls] { /* 연결한 파일의 확장자가 hwp인 링크 */
  background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
  padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
</style>
</head>

<body>
  <h3>회사 소개 파일 다운 받기</h3>
  <ul>
	<li><a href="intro.hwp">hwp 파일</a></li>
	<li><a href="intro.xls">엑셀 파일</a></li>
  </ul>
...

**- 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자**

값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

<예시>

[href *= w3] {...}

...
a[href *= "w3"] {  /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */ 
  background:blue;
  color:white;		 
}
</style>
</head>

<body>
  <h1>HTML5 참고 사이트 </h1>
  <p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
  <ul>
	<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
	<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
	<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
  </ul>
 ...

- 속성 선택자 정리

*가상 클래스와 가상 요소

- 사용자 동작에 반응하는 가상 클래스

:link - 방문하지 않은 링크에 스타일 적용
:visited - 방문한 링크에 스타일 적용
:active - 웹 요소를 활성화했을 때의 스타일 적용
:hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
:focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용
순서 : :link -> :visited -> :hover -> :active

<예시>

  .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>
</head>

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

=> 커서 올리기만 하면 검정색 / 클릭하면 잠깐 빨간색으로 반짝함

- 요소 상태에 따른 가상 클래스

:target - 앵커로 연결된 부분에 스타일 적용

<예시>

...
#intro:target {
  background-color:#0069e0;  /* 배경색 - 파란색 */
  color:#fff;  /* 글자색 - 흰색 */
}
</style>
...
<body>
<div class="container">
    <nav class="navi">
      <ul>
        <li><a href="#intro">이용 안내</a></li>
        <li><a href="#room">객실 소개</a></li>
        <li><a href="#reservation">예약 방법 및 요금</a></li>
        <li><a href="ps-2.html">예약하기</a></li>
      </ul>
    </nav>  
    <div id="intro" class="contents">
      <h2>이용 안내</h2>
      ...
    </div>
    <div id="room" class="contents">
      <h2>객실 소개</h2>
      ...
    </div>
    <div id="reservation" class="contents">
      <h2>예약 방법 및 요금</h2>
      ...
  </div>
</body>
...

=> 상단 이용안내를 누르면 앵커 대상 스타일이 변경된다(배경이 파랑으로 바뀜)

:enabled, :disabled - 요소의 사용 여부에 따라 스타일 적용
:cheched - 라디오 버튼이나 체크 박스에 체크했을 때 스타일 적용

<예시>

...
  #signup input:checked + label {  /* 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="family">가족형(최대 8인)</label>
    </li>          
  </ul>
...

:not - 특정 요소를 제외하고 스타일 적용

=> 스타일을 적용하려는 필드보다 적용하지 않는 필드가 더 적을 때

<예시>

- 일반적으로 텍스트 필드 선택

...
  #signup input[type=text], input[type=tel] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 200px;
  }
...

- not 선택자로 라디오 필드를 제외한 텍스트 필드 선택

...
  #signup input:not([type=radio]) {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 200px;
  }
...

- 구조 가상 클래스

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일 적용
위치가 계속 바뀐다면 an+b 처럼 수식 사용 가능 (이 때 n 값은 0부터)
구조 가상 클래스의 선택자

종류	설명
:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소 선택
A:only-type-of	부모 안에 A요소가 하나뿐일 때 선택
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
:last-child	부모 안에 있는 모든 요소 중 마지막 자식 요소를 선택
A:first-of-type	부모 안에 있는 A요소 중에서 첫 번쨰 요소 선택
A:last-of-type	부모 안에 있는 A요소 중에서 마지막 요소 선택
:nth-child(n)	부모 안에 있는 모든 요소 중 n번째 자식 요소 선택
:nth-last-child(n)	부모 안에 있는 모든 요소 중 끝에서 n번째 자식 요소 선택
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소 선택
A:nth-last-of-type(n)	부모 안에 있는 A요소 중 끝에서 n번째 요소 선택

<예시>

.contents :nth-child(3) {
    background-color:#ffff00;
  }
  .contents p:nth-of-type(3) {
    background-color:#00b900;
  }  
</style>
...
<div class="contents">
  <h2>이용 안내</h2>
  <p>Excepteur do ...</p> 
  <p>Qui magna culpa ...</p>
  <h2>객실 소개</h2>
  <p>Irure incididunt ...</p>
  <h2>예약 방법 및 요금</h2>
  <p>Fugiat aliquip... </p>
</div>
...

=> <div class="contents"> 태그 안에 <h2>, <p>, <p>, <h2>, <p>, <h2>, <p> 태그 순서대로 포함

=> 부모 요소는 contents

=> :nth-child(3)은 contents의 자식 중 3번째인 p 요소 선택

=> p:nth-of-type(3)은 contents의 p자식 요소 중 세번쨰 즉, <p>Irure incididunt ...</p> 요소에 스타일 적용됨

수식을 사용해 위치 지정

=> 반복되는 규칙이 있다면 an+b처럼 수식 이용이 가능(n값은 0부터)

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

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

- div 요소에서 짝수 번쨰로 나타나는 자식인 p 요소에 스타일 적용
div p:nth-child(even), div p:nth-child(2n)

<예시>

...
 table tr:nth-of-type(2n+1) {
   background: lightgray;
   color: black;
 }
</style>
...

- 가상 요소

화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상 요소 사용
:first-line : 특정 요소의 첫번째 줄에 스타일 적용
:first-letter : 특정 요소의 첫번째 글자에 스타일 적용
:before : 특정 요소의 앞에 지정한 콘텐츠 추가
:after : 특정 요소의 뒤에 지정한 콘텐츠 추가

<예시>

...
 li.new::after {
      content:"NEW!!";
      font-size:x-small;
      padding:2px 4px;
      margin: 0 10px;
      border-radius:2px;
      background:#f00;
      color:#fff;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>제품 목록</h1>
    <ul>
      <li class="new">제품 A</li>
      <li>제품 B</li>
      <li>제품 C</li>
      <li class="new">제품 D</li>
    </ul>
  </div>
...

* 총정리