본문 바로가기
IT/css

css class 선택자

by 뉴코딩맨 2023. 3. 15.

css class 선택자는 html 요소들을 하나의 그룹으로 묶어서 css를 적용하고 싶을 때 사용하는 방법입니다. 같은 종류의 요소가 아니라도 class를 부여하면 공통된 스타일을 적용시킬 수 있습니다.

 

사용법

 

.class{
 style
}

 

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      .content {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <span class="content"
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam
      voluptatibus, repellat excepturi rem suscipit quo repellendus odio
      voluptas saepe voluptates alias quis laboriosam eaque! Natus distinctio
      sapiente ipsa aspernatur!</span
    >
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      dolorem inventore! Perferendis inventore earum accusantium repellendus
      reiciendis, natus nobis recusandae ut ab porro, cupiditate, beatae ducimus
      corrupti non culpa eos.
    </div>
    <p class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore ex sint
      quibusdam placeat quas nisi. Quis delectus, fuga error tempora saepe odio
      quia possimus minus ratione iusto, sit expedita fugit.
    </p>
  </body>
</html>

 

class-선택자-적용
class-선택자-적용

 

'IT > css' 카테고리의 다른 글

css 자손 선택자  (0) 2023.03.15
css 인접 선택자  (0) 2023.03.15
css id 선택자  (0) 2023.03.14
css 요소 선택자  (0) 2023.03.14
css 전체 선택자  (0) 2023.03.14

댓글