CSS #id 셀렉터로 특정 ID 요소 선택하는 방법

웹 페이지에서 id="tutorials"와 같은 특정 ID를 가진 요소를 스타일링하고 싶다면, CSS의 #id 셀렉터를 사용하면 됩니다.

#id 셀렉터란?

#id 셀렉터는 HTML 문서 내에서 고유한 ID 속성을 가진 단일 요소를 선택할 때 사용합니다. ID는 문서 내에서 유일해야 하므로, 이 셀렉터는 해당 ID를 가진 하나의 요소에만 스타일을 적용합니다.

예제 코드

아래 예제에서는 id가 "tutorials"인 <p> 요소에 빨간색 테두리를 적용합니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #tutorials {
            border: 3px solid red;
         }
      </style>
   </head>
   <body>
      <h1>Tutorialspoint</h1>
      <h2>Learning</h2>
      <p id = "tutorials">Tutorials on web dev, programming, database, networking, etc.</p>
      <p>Every tutorials has lessons with illustrations and figures.</p>
   </body>
</html>

코드 설명

<style> 태그 안의 #tutorials { border: 3px solid red; } 코드가 핵심입니다.
이 규칙은 id 속성값이 "tutorials"인 요소에만 두께 3px의 빨간색 실선 테두리를 적용합니다.
같은 페이지의 다른 <p> 요소에는 아무런 영향을 주지 않습니다.

참고 사항

ID 셀렉터는 클래스 셀렉터(.)보다 우선순위(specificity)가 높습니다. 또한 하나의 HTML 문서에서 동일한 ID를 여러 요소에 중복해서 사용하면 안 되며, 여러 요소에 같은 스타일을 적용하려면 클래스 셀렉터를 사용하는 것이 올바른 방법입니다.