요소선택자(태그선택자): 가장 기본이 되는 선택자. 선택자 부분에 태그 이름이 들어간다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용.
h1 { color: red;}
h2 { color: red;}
h3 { color: red;}
h4 { color: red;}
h5 { color: red;}
h6 { color: red;}
선택자는 쉼표를 이용해 그룹화 할 수 있음.
h1, h2, h3, h4, h5, h6 { color: yellow;}
전체 선택자: 한번의 선언만으로 문서 내에 모든 요소에 스타일 규칙 적용. 성능에 매우 좋지 않으므로 사용을 지양.
* { color: yellow;}
선언의 그룹화
h1 { color: yellow; font-size: 2em; background-color: gray;}선택자와 선언 동시 그룹화
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }
class 선택자 : 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법. class 선택자를 사용하기 위해서는 html에 class 속성을 추가. class 속성을 글로벌 속성이므로 어느 태그에서도 사용 가능.
<style>
.foo { font-size: 30px; }
</style>
<body>
<p class="foo"> 내용 </p>
<body>
속성값으로 “foo” 라는 값 넣으면, CSS에서 그 값(“foo”)을 선택자로 지정하면 된다.
클래스 선택자를 사용할 때는 맨 앞에 .(마침표)를 찍어주어야한다.
다중 class : 공백으로 구분하여 여러개의 class값을 가질 수 있다.
<style>
.foo {color: blue;}
.bar {font-size: 30px}
</style>
<body>
<p class="foo bar">다중 class</p>
<p>내용</p>
</body>
id 선택자 : class 선택자와 비슷. .(마침표) 대신 #(해시)기호를 써준다.
<style>
#bar {background-color: yellow;}
</style>
<body>
<p id="bar">id 선택자</p>
</body>
class선택자와의 차이점.
- .(마침표)대신 #(해시)를 사용.
- 태그의 class 속성이 아닌 id 속성을 참조.
- 문서내의 유일한 요소에 사용. 즉, id 선택자는 하나의 요소만 규칙을 적용할 수 있다.
- 구체성
id 선택자는 문서 내에서 유일해야한다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있고 이것이 클래스 선택자의 장점.
선택자의 조합
/*요소와 클래스의 조합*/
p.bar {...}<p> 이면서 class 속성에 bar 있을경우 적용된다.
/*다중 class*/
.foo .bar {...}class 속성에 foo와 bar 모두 있어야 적용된다.
/*id와 class 조합*/
#foo .bar {...}
id가 foo 이면서, class가 bar 인 요소에 적용.
속성 선택자
- 단순속성으로 선택
- 정확한 속성값으로 선택
- 부분 속성값으로 선택
단순속성으로 선택
<style>
p[class] {color: blue;}
p[class][id] {text-decoration: underline;}
</style>
<body>
<p class="foo">A</p>
<p class="bar">B</p>
<p class="baz" id="title">C</p>
</body>
p[class] 선택자 규칙 : class 속성만 존재하면 적용된다.
p[class][id] 선택자 규칙 : class 속성과 id 속성 모두 있는 요소가 존재하면 적용된다.
두 규칙 모두 속성값에 상관 없이 적용된다.
정확한 속성값으로 선택
<style>
p[class = "foo"] {color: blue;}
p[id= "title"] {text-decoration: underline;}
</style>
<body>
<p class="foo">A</p>
<p class="bar">B</p>
<p class="baz" id="title">C</p>
</body>
p[class= "foo"]는 <p>이면서 class 속성값이, foo 이면 적용, p[id= "title"]는 <p>이면서, id 속성값이 title이면 적용.
부분 속성 값으로 적용 : 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 다름.
- [class~= "bar"] : class 속성값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
- [class^= "bar"] : class 속성값이 "bar"로 시작하는 요소 선택
- [class$= "bar"] : class 속성값이 "bar"로 끝나는 요소 선택
- [class*= "bar"] : class 속성값이 "bar" 문자가 포함되는 요소 선택
<style>
p[class ~= color] {font-style: italic;} /*1, 2번 요소*/
p[class ^= color] {font-style: italic;} /*1번 요소*/
p[class $= color] {font-style: italic;} /*2번 요소*/
p[class *= color] {font-style: italic;} /*1, 2, 3번 요소*/
</style>
<body>
<p class= "color hot">red</p>
<p class= "cool color">blue</p>
<p class= "colorful nature">rainbow</p>
</body>
CSS Selectors Reference (w3schools.com)
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
'정리' 카테고리의 다른 글
| [비전공자를 위한 HTML/CSS] (17) 가상 선택자 (0) | 2021.08.09 |
|---|---|
| [비전공자를 위한 HTML/CSS] (16) 문서구조 관련 선택자 (0) | 2021.08.09 |
| [비전공자를 위한 HTML/CSS] (14) CSS (0) | 2021.08.07 |
| [비전공자를 위한 HTML/CSS] (13) BLOCK & INLINE LEVEL (0) | 2021.08.06 |
| [비전공자를 위한 HTML/CSS] (12) 시멘틱 마크업 (0) | 2021.08.06 |
