Pseudo

pseudo-class

별도의 class를 지정하지 않고도 class를 지정한 것 처럼 요소를 선택할 수 있다.

:hover 

마우스를 위에 올렸을 때 CSS값

:first-child(last-child)

해당 부모 컨테이너의 차일드 중 첫번째(마지막) 요소

:first-of-type(last-of-type)

해당 부모 컨테이너의 차일드 중 조건 요소를 만족하는 첫번째(마지막) 요소

 

    <div class="container container-box">Mouse Hover</div>
    <input type="text" class="focus-input" />

    <div class="container-two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

이렇게 html의 body를 구성하고, header에 style을 내부 서식으로 아래와 같이 작성한다.

    <style>
      .parent p:first-of-type { /*parent class에서 (pesudo) p element type인 first child*/
        color: lightcoral;
      }

      .container {
        background-color: lightpink;
        padding: 10px;
        margin-bottom: 30px;
      }

      .container:hover {/*container class가 (pesudo) hover 되는 경우*/
        background-color: lightcoral;
      }

      .focus-input:focus {/*focus-input class가 (pesudo) focus 되는 경우*/
        background-color: lightgreen;
      }

      .container-two > div {    /*container-two class의 '>' 하위 자식 div들에 대해서*/
        margin-top: 30px;
        background-color: lightpink;
        width: 100px;
        height: 100px;
        float: left;
      }

      .container-two > div:nth-child(2n + 1) {  /*container-two class의 '>' 하위 자식들 중 2n+1(홀수)번째 자식들에 대해*/
        background-color: lightskyblue;
      }

      .container-two > div:last-child { /*container-two class의 '>' 하위 자식들 중 div인 last child에 대해*/
        width: 300px;
      }
    </style>

 

Mouse Hover

A

b

c

 

Pseudo Element

가상 클래스처럼 선택자에 추가되는데, 존재하지 않는 요소를 존재하는 것처럼 부여해 문서의 특정부분을 선택함

:: 로 표현

 

before와 after를 자주 쓴다.

    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>

    <style>
      li {
        float: left;
        margin-right: 30px;
        font-size: 32px;
        list-style: none;
      }
    </style>

이렇게 만든 html은

이렇게 보이게 된다.

여기서 style에

      li::after {
        /*모든 li element의 뒤에*/
        content: "|";
      }

      li:last-of-type::after {
        /*li element의 last-of-type의 뒤에*/
        content: "";
      }

      li:first-of-type::before {
        /*li element의 first-of-type의 앞에*/
        content: "시작";
      }

을 추가해주게 되면

가 되어서 li element의 모든 뒤에 |가 붙지만,

li element 중 마지막 타입은 content를 없애버렸기 때문에 C의 뒤에는 |가 붙지 않았다.

또한 li element 중 첫번째 타입의 앞에는 "시작"이라는 content를 붙였기 때문에 A 앞에는 시작이 적히게 된다.

 

꼭! before와 after는 content와 같이! 쓰여야만 한다.

HTML에 없던 정보를 CSS에서 새롭게 생성해주는 역할이다.