CSS: 2 선택자

선택자(SELECTOR)

CSS의 속성과 속성값을 어디에, 어느범위로 적용시킬지 택한다.

요소선택자(태그 선택자)

h1 {color:yellow;}
h2 {color:yellow;}
h3 {color:yellow;}
h4 {color:yellow;}
h5 {color:yellow;}
h6 {color:yellow;}

태그별로 적용시키는 경우.

쉼표(,)로 그룹핑이 가능하다.

h1,h2,h3,h4,h5,h6{
	color:yellow;
}

선택자 & 선언 그룹화 가능

h1,h2,h3,h4,h5,h6{
    color:yellow;
    font-size: 2em;
    background-color: gray;
}

전체 선택자

*{
	color:yellow;
}

한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용

Class 선택자

.foo {
	font-size:30px;
}

.에 클래스 명을 붙여주면 된다.

class="foo"를 가진 태그에 적용

ID 선택자

#foo {
	font-size:30px;
}

#을 사용함.

class 선택자와의 차이점

.기호가 아닌 #기호 사용
태그의 class 속성이 아닌 id 속성을 참조
문서 내에 유일한 요소에 사용
구체성

id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐, id는 문서 내에서 유일해야 한다.

우선순위

ID선택자 > 클래스선택자 > 태그 선택자 순이다.

동일한 선택자 시 제일 나중에 쓰인 것으로 적용된다.

선택자의 조합

/*요소와 클래스 조합*/
p.bar{...}

/*다중 클래스*/
.foo.bar{...}

/*아이디와 클래스 조합*/
#foo.bar{...}

속성선택자

단순 속성으로 선택

p[class] {
	color: silver; 
} 
/*p 태그 중 class속성을 가진 것*/


p[class][id] {
	text-decoration: underline;
} 
/*p 태그 중 class와 id 속성을 가진 것*/

<p class="foo">Hello</p> /*silver*/
<p class="bar">CSS</p> /*silver*/
<p class="baz" id="title">HTML</p> /*silver underline*/

정확한 속성값으로 선택

p[class="foo"] {
	color: silver; 
}

p[id="title"] {
	text-decoration: underline; 
}

<p class="foo">Hello</p> /*silver*/
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p> /*underline*/

부분 속성값으로 선택

[class~="color"]: class 속성의 값이 공백으로 구분한 "color" 단어가 포함되는 요소 선택
[class^="color"]: class 속성의 값이 "color"로 시작하는 요소 선택
[class$="color"]: class 속성의 값이 "color"로 끝나는 요소 선택
[class*="color"]: class 속성의 값이 "color"문자가 포함되는 요소 선택 (공백포함여부 상관 없음 color라는 단어만 들어가면 됨)

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

문서 관련 선택자

문서의 구조를 이용하여 요소를 결정하는 선택자.

문서 구조의 분별 예시

<div>
    <h1><span>HTML</span>:Hyper Text Markup Language</h1>
    <span>CSS는 문서를 꾸며줍니다</span>
</div>
<span>Javascript는 문제를 동적으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>

부모 자식관계

<body>의 부모 요소: <html> -> <body>의 자식 요소: <div>, <span>, <p>
<div>의 부모 요소: <body> -> <div>의 자식요소 : <h1> <span>

형제 관계(같은 부모 요소를 가짐)

<body>와 <head>는 <html>이라는 동일 부모를 가진 형제 요소이다.
<div>, <span>, <p> 는 <body>라는 동일 부모를 가진 형제 요소이다.
<h1>과 <span>은 <body>라는 동일 부모를 가진 형제 요소이다.

조상 자손 관계

<body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>, <head>
<div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
<h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
<span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
<p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>

문서 구조를 이용한 선택자

자손 선택자

div span {
    color:red; 
}

자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분

<div>의 자손 요소인 <span>를 선택하는 선택자

=> div 요소 안에 위치하는 모든 span요소를 선택하기.

자식 선택자

div > h1 {
    color: red; 
}

>(꺽쇠 기호) (공백여부 상관 없음)

<div>의 자식 요소인 <h1>를 선택하는 선택자

=>div 요소의 바로 아래에 위치하는 모든 h1 요소를 선택하기.

형제 선택자

div~span {
    color:red;
}

div+span {
    color:red; 
}

선택자 사이에 ~(물결) 기호 (공백 여부 상관 없음)

선택자 사이에 +(플러스) 기호 (공백 여부 상관 없음)

=>div 요소의 뒤에 오는 형제 중 모든 span요소를 선택하기(상)

=>div 요소의 바로 뒤에 오는 형제 span 요소를 선택하기(하)

+이를 인접 형제 선택자라고 하는데, 이는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자.

조합해서 사용

body>div table+ul(...)

body요소의 자식인 div요소의 자손인 table요소 바로 뒤에 인정한 ul 요소 선택.

가상선택자

가상클래스(의사 클래스)

미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스

선택자:의사클래스{
    속성명: 속성값;
}

h1: pseudo-class {
    property: value;
}

위와 같이 : (콜론) 기호를 써서 나타낸다

문서 구조와 관련된 가상 클래스

:first-child - 첫 번째 자식 요소 선택

:last-child - 두 번째 자식 요소 선택

li:first-child { color: red; }
li:last-child { color: blue; }

<ul>
    <li>HTML</li> /*red*/
    <li>CSS</li>
    <li>JS</li> /*JS*/
</ul>

앵커 요소와 관련된 가상 클래스 <a href="'></a>

:link - 하이퍼링크이면서 아직 방문하지 않은 앵커

:visited - 이미 방문한 하이퍼링크를 의미

a:link{ color:blue; }
a:visited{ color:gray; }

<head>
    <style media "screen">
        a:link{ color: blue; }
    	a:visited{ color: gray; }
    </style>
</head>
<body>
    <a href="사이트">네이버</a>
    <a href="사이트">구글</a>
    <a href="사이트">다음</a>
</body>

클릭하면 회색으로 변함

사용자 동작 관련 가상 클래스

:focus - 현재 입력 포커스를 갖고 있는 요소에 사용
:hover - 마우스 포인터가 위치해 있는 요소에 적용 (마우스를 올렸을 때)
:active - 사용자 입력에 의해 활성화된 요소에 적용 (ex. <a>를 클릭할때, <button>을 눌렀을 때)

<head>
	<style media="screen">
		a:focus { background-color: yellow; }
		a:hover { font-weight: bold; }
		a:active { color: red; }
	</style>
</head>
<body>
    <a href="사이트">네이버</a>
    <a href="사이트">구글</a>
    <a href="사이트">다음</a>
</body>

가상요소(의사요소)

선택자에 추가하는 키워드로, 이를 이용하면 존재하지 않는 구조 요소에 스타일을 부여가 가능하고

선택한 요소의 특정 부분에 대한 스타일 정의가 가능하다.

선택자::의사요소{
    속성명: 속성값;
}

가상 클래스와 달리 ::(더블콜론) 사용

하위 브라우저에서 호환되지 않는 경우 상황에 따라 :(콜론)을 사용하는 경우도 있다.

존재하지 않는 구조 요소에 스타일을 부여하는 예시

p::before {
    color: red;
    content: "before 가상 요소를 활용한 내용";
}


p::after {
    color: blue;
    content: "after 가상 요소를 활용한 내용";
}

:before - 가장 앞에 요소를 삽입(content) (자식요소추가)
:after - 가장 뒤에 요소를 삽입(content) (자식요소추가)

선택한 요소의 부분에 스타일을 부여하는 예시

p::first-line {
     color: yellow;
}

p::first-letter {
    font-size: 3em;
}

:first-line - 요소의 첫 번째 줄에 있는 텍스트
:first-letter - 블록 레벨 요소의 첫 번째 문자

목록 기호의 스타일을 적용

::marker

li::marker{
    color: aqua;
}

입력 요소의 플레이스 홀더(자리표시자) 스타일을 지정

::placeholder

input::placeholder {
    color: tomato;
}

Reference

https://www.boostcourse.org/cs120/lecture/92868?isDesc=false

https://www.inflearn.com/course/%EC%9E%85%EB%AC%B8%EC%9E%90-css-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%9D%98

본 게시글은 부스트코스 비전공자를 위한 HTML/CSS, 인프런 입문자를 위한 CSS 기초 강의 수강 후 작성한 게시글임.

'CSS' 카테고리의 다른 글

CSS: 6 float, clear (0)	2022.03.31
CSS: 5 텍스트 관련 속성 (0)	2022.03.28
CSS: 4 박스모델(Box-Model) (0)	2022.03.28
CSS: 3 구체성, 상속, 캐스케이딩 (0)	2022.03.28
CSS: 1 CSS란, 문법 (0)	2022.03.24

slow and steady

CSS: 2 선택자

선택자(SELECTOR)

요소선택자(태그 선택자)

전체 선택자

Class 선택자

ID 선택자

우선순위

선택자의 조합

속성선택자

문서 관련 선택자

가상선택자

Reference

'CSS' 카테고리의 다른 글

티스토리툴바

CSS: 2 선택자

선택자(SELECTOR)

요소선택자(태그 선택자)

전체 선택자

Class 선택자

ID 선택자

우선순위

선택자의 조합

속성선택자

문서 관련 선택자

가상선택자

Reference

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바