CSS 아이디 선택자 의미는 HTML 태그의 id 속성을 CSS 선택자로 지정할 때 사용하는 용어입니다. id 속성은 선택자 지정시 # 샵 기호를 사용합니다.
CSS 아이디 선택자
아이디 선택자(ID Selector)는 HTML 태그의 ID 속성을 선택자로 지정할 수 있는 기능입니다.
아이디 속성은 선택자로 지정시 샵 # 기호를 이름 앞에 붙입니다. 아이디명이 abc인 경우 #abc로 작성합니다.
#abc {
color: red;
}아이디 속성이 abc인 태그의 값이 붉은 글씨(color : red;)로 변하게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
color: red;
}
</style>
</head>
<body>
<h1 id="abc">아이디 선택자</h1>
</body>
</html>아이디 값 중복 불가
HTML 태그의 아이디 속성명은 중복될 수 없습니다. 따라서 여러 아이디 값을 주고 싶다면 독립적인 이름을 작성해야 합니다.
따라서 아이디 선택자도 각각 따로 작성해서 호출해야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
color: red;
}
#xyz {
color: blue;
}
</style>
</head>
<body>
<h1 id="abc">아이디 선택자</h1>
<p id="xyz">아이디 값은 중복될 수 없습니다.</p>
</body>
</html>궁금해서 사용해보면, 아이디 속성도 클래스 속성처럼 중복해서 적용은 됩니다. 하지만 나중에 자바스크립트나 제이쿼리 등과의 프로그래밍 언어과 결합해서 사용할 경우 문제가 생길 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
color: red;
}
</style>
</head>
<body>
<h1 id="abc">아이디 값</h1>
<p id="abc">아이디 값도 중복은 됩니다.</p>
<p id="abc">하지만 나중에 제이쿼리 등의 선택자와 결합시 충돌이 일어나게 됩니다.</p>
</body>
</html>따라서 CSS 아이디 속성값은 중복하지 않고 사용하는 것이 좋습니다.