220915 TIL - 선택자 심화

jhyun_k·2022년 9월 15일
0
post-thumbnail

속성선택자

알아두면 쓸모있는 유용한 속성선택자~ 근데 매번 제대로 활용을 못해서 이번기회에 다시 정리,,

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        /* 1. 태그[속성이름] */
        /* 속성명으로 선택했을 경우 */
        /* div 태그이면서 class 속성을 가지고 있는 요소 */
        div[class] {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        /* a 태그이면서 href 속성을 가지고 있는 요소 */
        a[href] {
            color: gray;
        }

        /* 2번부터 하나씩 주석을 해제해보며 실습해 보세요 :) */

        /* 2. 태그[속성이름="값"] */
        /* div 태그이면서 class명이 red인 요소*/
        /* 공백을 포함하지 않기 때문에 red 클래스 하나만 가진 요소가 선택됩니다. */
        /* div[class="red"] {
            background-color: red;
        } */

        /* 3. 태그[속성이름~="값"] */
        /* div 태그이면서 red인 class를 가지고 있는 요소 */
        /* 공백을 포함하기 때문에 red 클래스를 가진 요소는 div 태그는 모두 선택됩니다. */
        /* div[class~="red"] {
            background-color: red;
        } */

        /* 4. 태그[속성이름*="값"] */
        /* div 태그이면서 class 중 red 문자열을 포함하는 요소 */
        /* div[class*="red"] {
            background-color: red;
        } */

        /* 5. 태그[속성이름^="값"] */
        /* div 태그이면서 class 속성값이 sky로 시작하는 요소 */
        /* div[class^="sky"] {
            background-color: skyblue;
        } */
        /* a 태그이면서 href 속성값이 http로 시작하는 요소 */
        /* a[href^="https"] {
            color: red;
        } */

        /* 6. 태그[속성이름$="값"] */
        /* div 태그이면서 속성값이 pink로 끝나는 요소 */
        /* div[class$="pink"] {
            background-color: pink;
        } */
        /* a 태그이면서 href 속성값이 kr로 끝나는 요소 */
        /* a[href$="kr"] {
            color: black;
        } */

        /* 6. 태그[속성이름|="값"] */
        /* a 태그이면서 href 속성값이 http이거나 http로 시작하는 요소 */
        /* 
           언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며,
           독립된 값이거나 하이픈을 포함하는 값은 선택됩니다.
         */
        /* a[href|="http"] {
            color: red;
        } */
    </style>
</head>
<body>
    <!-- class 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <div>1</div>

    <div class="red">2</div>
    <div class="red pink">3</div>
    <div class="redpink skyblue pink">4</div>
    <div class="skyblue">5</div>

    <hr>

    <!-- href 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <a>바울랩</a>

    <a href="http://paullab.co.kr">바울랩1</a>
    <a href="http://paullab.com">바울랩2</a>
    <a href="https://paullab.com">바울랩3</a>
    <a href="http">바울랩4</a>
    <a href="http-paullab">바울랩5</a>
</body>
</html>

중에서 그나마 편하게 쓸 수 있을 것 같은건

  • 태그[속성이름]
  • 태그[속성이름="변수"]
  • 태그[속성*="변수"]

정도? 내가 다 까먹을 것 같다..ㅠ

가상 클래스 선택자(Pseudo class selector)

html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자

<ul>
	<li class="foo">1</li>    <!-- .foo:first-child -->
	<li class="foo">2</li>    
	<li class="foo">3</li>    <!-- .foo:nth-child(3) -->
	<li class="foo">4</li>
	<li class="foo">5</li>    <!-- .foo:last-child -->
</ul>
  1. .foo:first-child : class="foo"인 ****엘리먼트 중 첫번째 자식인 엘리먼트를 선택합니다.
  2. .foo:last-child : class="foo"인 ****엘리먼트 중 마지막 자식인 엘리먼트를 선택합니다.
  3. .foo:nth-child(3) : class="foo"인 엘리먼트 중 3번째 자식인 엘리먼트를 선택합니다.
    1) .foo:nth-child(odd) : class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 모두 선택합니다.
    2) .foo:nth-child(even) : class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 모두 선택합니다.
    3) .foo:nth-child(n) : class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 모두 선택합니다. n은 0부터 1씩 증가합니다. (0, 1, 2, 3, 4, 5 … )
    4) .foo:nth-child(3n) : class="foo"인 엘리먼트 중 3번째 자식마다 모두 선택합니다. (3x0, 3x1, 3x2, 3x3, 3x4, 3x5 … )
    5) .foo:nth-child(3n+1) : class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 모두 선택합니다. (3x0+1, 3x1+1, 3x2+1, 3x3+1, 3x4+1, 3x5+1 … )
  4. a:visited : 방문한 적이 있는 링크를 선택합니다.

상호작용 위한 가상클래스

  • :hover 사용자가 마우스를 요소 위에 올리면 반응 (모바일에서는 사용 못함)
button:hover{
	background-color: yellow;
}
  • :active 사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용 (누르면 유지되는게 아니라 누르고 있어야 적용됨)
a:active{
	color: red;
}
  • :focus 요소에 포커스가 있을 때, 클릭할 수 있는 요소나 폼컨트롤(input, select 등등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능
  • :checked 체크박스, 라디오 옵션에서 체크되었을 때 적용

가상요소 선택자

  • ::before 요소의 맨 첫번째 자식으로 HTML코드에 존재하지 않는 가상요소 하나 생성
  • ::after 요소의 맨 마지막 자식으로 코드에 존재하지 않는 가상요소 생성
/* p 태그의 첫번째 자식으로 텍스트를 생성합니다. */
section::after{
	display:block;
	content:'hello world!';
}

요런식으로 사용하거나 가끔 사이드바, 옆에 점 같은거 , list style에 원하는 이미지 넣고 싶을 때도 썼다

  • ::selection 사용자가 선택하여 하이라이트 된 상태의 텍스트 선택

🌱 가상 클래스 선택자와 가상 요소 선택자 차이

  • 가상 요소 선택자는 콜론이 2개(가상 클래스 선택자는 1개). 간혹 가상요소 선택자에 콜론이 1개만 보이는 경우는 레거시 브라우저 호환을 위한 선택 (Internet Explorer 8이하)
  • 가상 요소 선택자는 마크업 없는 요소를 삽입(가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입)

0개의 댓글