HTML/CSS - Pseudo selectors(선택자)

1. Pseudo selectors (선택자)

- CSS에서 특정 엘리먼트를 선택하기 위해서 아이디는 #아이디명으로 클래스는 .클래스명으로 명시한다. 아이디는 고유값으로 1개의 엘리먼트만 선택되지만, 클래스는 해당 클래스명을 가진 모든 엘리먼트가 선택된다. 상황에 따라 특정 클래스만을 선택하고 싶은 경우가 발생할 수 있다. 이럴 때 사용하는 기술이 pseudo selector이다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

developer.mozilla.org

- pseudo selector를 이용하는 것이 id와 class를 명시하는 것보다 어떤 점이 더 좋은지 묻는다면, pseudo selector는 HTML을 수정하지 않고 바로 Style태그에서 또는 CSS에서 명시하여 사용할 수 있다는 것이 장점이다.

- 아래와 같은 기본 코드가 있다.

<!DOCTYPE html>
<html>
  <head>
    <!-- 새창 탭에 들어가는 아이콘을 설정하는 방법 shortcut icon-->
    <link
      rel="shortcut icon"
      sizes="16x16 32x32 64x64"
      href="https://nomadcoders.co/m.svg"
    />
    <title>Home - My firts website.</title>
    <meta name="description" content="This is my website" />
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet" />
    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }

      div {
        width: 300px;
        height: 300px;
        color: whitesmoke;
        background-color: blanchedalmond;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

- 위의 코드는 6개의 div태그를 갖고 있다. 그리고 style태그에 div가 이미 명시되어 있다. 만약에 div중에서 가장 마지막에 있는 div의 색상만 초록색으로 바꾸고 싶다고 한다면 어떻게 할까? 당연히 id를 사용하여 쉽게 명시할 수도 있지만 pseudo selector는 다른 방식으로 해결한다.(아래 사진참고)

- div: 를 입력했을 때, 위의 사진처럼 다양한 속성/옵션이 존재하는 것을 알 수 있다. 이것이 pseudo selector이다. 마지막 div를 명시하고 싶다면 last_child라는 selector를 선택한 후 스타일 속성을 적용하면 된다.

- 그러면 위의 사진처럼 마지막 div만 배경색깔이 바뀐 것을 확인할 수 있다. 이 이외에도 다양한 selector가 존재한다.

예제1) 6개의 span이 있는데 2, 4, 6번째 span만 다른 배경색을 갖도록 만들어라 → nth-child()

    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }

      span {
        background-color: teal;
      }

      span:nth-child(even) {
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <span>Hello, world!</span>
    <span>Hello, world!</span>
    <span>Hello, world!</span>
    <span>Hello, world!</span>
    <span>Hello, world!</span>
    <span>Hello, world!</span>
  </body>
</html>

정답:

span:nth-child(even) {
background-color: tomato;
}

- nth-child()는 특정 몇번째의 자식 엘리먼트인지 명시하면 해당 엘리먼트를 선택할 수 있는 selector이다.

- even(짝수)이나 odd(홀수)같은 명칭만 가능한 것이 아니라 3n+1과 같이 계산식을 넣어서 특정 엘리먼트를 지정하게도 할 수 있다. (아래 사진참고)

[*계산식을 읽는법]

ex)3n+1

- 3n은 3번째마다 +는 왼쪽 끝에서부터 1은 첫번째부터 적용을 의미

ex)5n -1

- 5n은 5번째마다 -는 오른쪽 끝에서부터 1은 첫번째부터 적용을 의미

2. Pseudo selectors - combinators(>, +, ~)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Pseudo

예제1) 다음과 같은 기본 코드가 있을 때, p태그 내부에 존재하는 span태그를 바꿔보자.

    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }

      span {
        color: tomato;
      }
    </style>
  </head>
  <body>
    <div>
      <span>HELLO!!!</span>
      <p>
        가나다라마바사아자차카타파하
        <span>inside</span>
      </p>
    </div>
  </body>
</html>

- 위 코드의 경우, 바꾸려고하는 span태그는 p태그의 자식엘리먼트이다. 그러므로 p태그는 span태그의 부모태그가 된다. 부모와 자식엘리먼트를 선택하기 위해서는 그 구조를 순서대로 명시하면 된다. 더 정확하고 자세히 하자면 div p span이라고 명시할 수 있다.

예제2) 다음과 같은 기본 코드에서 HELLO!!!라는 문자열을 갖고있는 첫번째 span에만 속성을 적용해보자. (첫번째 span에만 padding: 5px; border-radius: 10px; 을 적용한다.)

    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }

      span {
        background-color: yellowgreen;
      }

      p span {
        background-color: yellowgreen;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>
      <span>HELLO!!!</span>
      <p>
        가나다라마바사아자차카타파하
        <span>inside</span>
      </p>
    </div>
  </body>
</html>

- 위의 코드구조를 보았을 때, 첫번째 span은 div태그 direct-children(바로 밑에 있는 첫번째 자식 태그)인 것을 알 수 있다. 이를 명시하는 연산자(>)를 이용하여 코드를 작성하면 예제3이 말하는 것을 구현할 수 있다.

- 방금 사용한 연산자(>)는 부모-자식관계가 형성되어야 사용 및 명시가 가능하다. 부모-자식관계가 아닌 즉, 형제관계에서 사용할 수 있는 덧셈 연산자(+)는 바로 다음에 위치한 태그를 의미한다.

- 그러나 만약에 형제관계의 엘리먼트 중 특정 엘리먼트를 건너뛰고 명시하고 싶다면 어떻게 해야할까? 예를 들어, 아래 사진과 같이 span에서 바로 p태그로 넘어가는 것이 아니라 중간에 article태그가 끼어 있는 경우를 의미한다.

- 이럴 때, 사용하는 연산자가 바로 물결표시(~)이다. 물결표시 연산자(~)는 형제관계에 있는 요소간의 순서를 중요시하지 않고 형제관계에 존재하는 특정 태그를 선택할 수 있다.

2. Pseudo selectors - attributes(속성값을 이용한 선택자)

- 지금까지 예제로 봐온 구조를 이용한 선택자가 아닌 속성값을 이용한 선택자도 존재한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

developer.mozilla.org

예제1) 아래과 같은 코드를 기반으로 form태그에 존재하는 두개의 input태그 중 required 속성값을 가진 input태그의 테두리 색을 바꿔보자.

    <style>
      body {
        height: 1000vh;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" placeholder="User-name">
      <input type="password" placeholder="Password" required>
    </form>
  </body>
</html>

- 이 경우에는 required라는 선택자를 이용하여 해당 속성을 가진 input태그를 선택할 수 있다.

- required의 반대는 optional이다. 당연히 이 부분도 선택자로 존재한다.

- 위의 required와 optional에는 겹치는 코드가 존재한다. 바로 10px solid라는 부분이다. 효율적인 코드를 만드는 습관 중 첫번째는 중복을 줄이는 것이다. 그러면 이 코드를 조금 더 깔끔하게 만들어보자.

- 여기서 한가지 의문이 든다. 선택자에 존재하지 않는 속성값을 이용하여 엘리먼트를 선택할 수는 없을까? 대괄호[]를 이용하면 이를 해결할 수 있다. 예를 들어, type="password"인 input을 선택하고 싶다면 다음과 같이 작성하면 된다. (아래 사진참고)

- 물결(~)과 equal표시(=)를 합친 연산자(~=)를 이용하여 속성값의 부분만을 가지고 있는 엘리먼트를 선택할 수도 있다.(아래 기본코드 참고)

<body>
    <form>
      <input type="text" placeholder="First name" />
      <input type="text" placeholder="Last name" />
      <input type="password" placeholder="Password" required />
    </form>
  </body>

- 예를 들어, placeholder의 속성값으로 name을 갖고 있는 엘리먼트를 선택한다면 다음과 같다.

- 이 외에도 다양한 선택자들이 존재한다. 위에서 언급된 링크에 한번씩 들어가 재미삼아 읽어보기를 바란다.

'Front-end > HTML + CSS' 카테고리의 다른 글

HTML/CSS - CSS Variable (0)	2020.08.27
HTML/CSS - State & 속성 선택자(selector) (0)	2020.08.26
HTML/CSS - Position (relative&absolute) (0)	2020.08.24
HTML/CSS - Inline_block & Flex_box (0)	2020.08.24
HTML/CSS - Block & Inline (0)	2020.08.18