CSS 선택자 이용방법

2023. 3. 20. 14:16

<!DOCTYPE html>

<head>

* {color:yellowgreen} /*모든 요소를 한 번에 선택할때 에는 * 기호를 사용한다. */ /*①*/

blockquote {color:aqua} /*특정 태그명을 선택자로 지정하면 선택한 태그만 적용된다.*/ /*②*/

p[title]{color:#73f677} /*특정 태그, 속성을 선택자로 지정가능하다.*/ /*③*/

p[title="HTML"]{color:#00bfff} /*특정 태그, 속성, 속성값을 선택자로 지정가능하다.*/ /*④*/

#TEST-ID {color:red} /* id 속성값을 이용해 선택자를 지정한다. 속성값 앞에는 # 기호를 붙여 구분한다.*/ /*⑤*/

.TEST-CLASS {color:BLUE} /* class 속성값을 이용해 선택자를 지정한다. 속성값 앞에는 . 기호를 붙여 구분한다.*/ /*⑥*/

[href]{color:#000000} /*태그를 제외하고 속성, 속성값만 넣을경우 선택자는 모든 태그 상관없이 속성, 속성값이 포함된다*/ /*⑦*/

del, ins, em {background:#013c03} /*복수개의 태그, 속성, 속성값을 한번에 지정 가능하다.*/ /*⑧*/

del[title], ins[title], em[title] {background:#53919f} /*구분은 , 기호로 구분한다.*/

del[title="TEST01"], ins[title="TEST01"], em[title="TEST01"] {background:#cf37b8}

.box > p {background:#00bfff; color:#000000} /*class 속성값이 box인 요소의 자식 관계에 있는 p태그를 선택할 수 있다.(>기호로 구분한다.)*/ /*⑨*/

.TTT p {background:#efab0c; color:#000000} /*하위 태그 모두 선택이 가능하다(선택자 사이에는 공백으로 구분한다.)*/ /*⑩*/

.QQQ + .AAA {background:#cf37b8} /*QQQ클래스 다음에 오는 1개의 형제 AAA클래스를 선택할 수 있다 ( + 기호로 구분)*/ /*⑪*/

.BBB + .CCC {background:#376acf}

.aaaaaa ~ .bbbbbb{background:#000000} /*aaaaaa클래스 다음에 오는 모든 형제 bbbbbb클래스를 선택할 수 있다 ( ~ 기호로 구분)*/ /*⑫*/

/*가상요소 선택자 (요소의 특정한 부분에 정해진 기능을 하도록 적용 - 하위요소처럼 사용이 가능하다.*/

/* ::before 기준선택자 앞의 공간을 선택

::after 기준선택자 뒤의 공간을 선택

::marker li에 앞에 붙는 마커를 선택

* content 속성은, before, after, marker 에서만 사용이 된다.

▼ content의 속성 값

"" - 빈 컨텐츠를 표시("" 사이에 문자나 이모지등을 넣으면 표기된다.)

url(링크주소) - 이미지를 넣을수 있다

::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택

::first-letter 첫 글자를 선택

::first-line 첫 줄 내용을 선택

p.TEXT::before {content:"앞 "} /*앞부분 텍스트 추가*/ /*⑬*/

p.TEXT::after {content:url(https://blog.kakaocdn.net/dn/bpz3oI/btr5nKSf6CH/fmahq3Mkfg8dZJD5LwCItk/star.png?attach=1&knm=img.png)} /*뒤쪽 부분에 이미지 추가*/ /*⑬*/

li.LIST::marker {content:"😊"} /*li태그에 사용되는 마커를 편집*/ /*⑬*/

p.TEXT::selection {color:red} /*마우스로 드레그 선택한 텍스트를 붉은 색으로 편집*/ /*⑬*/

p.TEXT::first-letter {color:green /*추가된 텍스트 포함 첫글자 초록으로 편집*/} /*⑬*/

p.TEXT::first-line {color:blue} /*해당 줄을 파란색으로 편집*/ /*⑬*/

/*가상클래스 선택자 (요소의 상태를 이용해 선택하는 지정방법)*/ /*⑭*/

/* :link 한 번도 방문한 적이 없는 링크를 선택

:visited 한 번이라도 방문한 적이 있는 링크를 선택

:hover 요소에 마우스를 올리면 해당 태그가 선택됨

:active 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택됨(버튼, 텍스트를 누르고 있을때)

:focus input 태그의 text, password 등 입력요소에 커서가 활성화 되면 선택

:checked 체크박스가 표시되어 있으면 스타일을 적용

:disabled 상호작용 요소가 비활성화되어 있으면 스타일을 적용

:enabled 상호작용 요소가 활성화되어 있으면 스타일을 적용

a[title="TEST"]:link {color:red} /*방문한적이 없는 링크는 빨간색*/ /*⑭*/

a[title="TEST"]:visited {color:green} /*방문한 적이 있는 링크는 초록색*/ /*⑭*/

a[title="TEST"]:hover {color:blue} /*링크자리에 마우스를 올리면 파란색*/ /*⑭*/

a[title="TEST"]:active {color:yellow} /*링크자리를 클릭할때 노란색 (버튼등에도 사용가능)*/ /*⑭*/

[title="text"]:focus {color:aqua} /*입력창에 글적을때 마우스커서 하늘색*/ /*⑭*/

[title="color"]:checked + p {color:purple} /*체크박스에 체크를하면 다음 태그인 p태그 텍스트 보라색*/ /*⑭*/

[type="text"]:disabled {background-color:goldenrod} /*텍스트 입력창이 비활성이면 골드색*/ /*⑭*/

[type="text"]:enabled {background-color:aquamarine} /*텍스트 입력창이 활성이면 아쿠아마린색*/ /*⑭*/

/*구조적 가상클래스 선택자 (HTML의 태그 사용 위치, 가른 태그와의 관계에 따라 선택하는 지정방법)*/ /*⑮*/

/* :first-child 부모 요소의 자식 요소 중 첫 번째 자식 요소를 선택자로 지정

:last-child 부모 요소의 자식 요소 중 마지막 자식 요소를 선택자로 지정

:nth-child(n) 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택자로 지정

:nth-last-child(n) 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택자로 지정

:first-of-type 부모 요소의 자식 요소 중 첫 번째로 등장하는 요소를 선택

:last-of-type 부모 요소의 자식 요소 중 마지막으로 등장하는 요소를 선택

:nth-of-type(n) 부모 요소의 자식 요소 중 n번째로 등장하는 요소를 선택

:nth-last-of-type(n) 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 요소를 선택

div.TEST p:first-child {color:red} /*TEST클래스인 div 태그의 첫 번째 색을 빨강*/ /*⑮-①*/

div.TEST p:last-child {color:blue} /*TEST클래스인 div 태그의 마지막 색을 파랑*/ /*⑮-①*/

div.TEST p:nth-child(3) {color:peru} /*TEST클래스인 div 태그의 3번째 색을 주황*/ /*⑮-①*/

div.TEST p:nth-last-child(2) {color:purple} /*TEST클래스인 div 태그의 마지막에서 2번째 색을 보라*/ /*⑮-①*/

div.TEST p:first-of-type {background-color:#00bfff4f} /*TEST클래스인 div 태그의 p태그중 첫 번째 배경을 파랑*/ /*⑮-②*/

div.TEST p:last-of-type {background-color:#ff000046} /*TEST클래스인 div 태그의 p태그중 마지막 배경을 빨강*/ /*⑮-②*/

div.TEST p:nth-of-type(3) {background-color:#00ff3743} /*TEST클래스인 div 태그의 p태그중 3번째 배경을 초록*/ /*⑮-②*/

div.TEST p:nth-last-of-type(3) {background-color:#ffb7003d} /*TEST클래스인 div 태그의 p태그중 마지막에서 3번째 배경을 노랑*/ /*⑮-②*/

</style>

</head>

<body>

<br>

<br>

<br>

<p>자식p태그⑨</p>

<div>

<p>손자p태그⑨</p>

</div>

<p>자식p태그⑨</p>

</div>

<p>자식p태그⑩</p>

<div>

<p>손자p태그⑩</p>

</div>

<p>자식p태그⑩</p>

</div>

</div>

</div>

</div>

<p class="cccccc">cccccc⑫</p>

<p class="dddddd">dddddd⑫</p>

</div>

<p class="eeeeee">eeeeee⑫</p>

<p class="ffffff">ffffff⑫</p>

</div>

<p class="gggggg">gggggg⑫</p>

<p class="hhhhhh">hhhhhh⑫</p>

</div>

</div>

</body>

</html>

선택자

가나다①

라마바②

사아자③

차카타④

파하⑤

한글⑥

네이버 링크⑦

---------------------------------------------------------------------------

~~삭제⑧~~ 추가⑧ 기울기⑧
~~삭제⑧~~ 추가⑧ 기울기⑧
~~삭제⑧~~ 추가⑧ 기울기⑧

---------------------------------------------------------------------------

자식p태그⑨

손자p태그⑨

자식p태그⑨

---------------------------------------------------------------------------

자식p태그⑩

손자p태그⑩

자식p태그⑩

---------------------------------------------------------------------------

BBB⑪

CCC⑪

DDD⑪

EEE⑪

DDD⑪

EEE⑪

---------------------------------------------------------------------------

cccccc⑫

dddddd⑫

eeeeee⑫

ffffff⑫

gggggg⑫

hhhhhh⑫

---------------------------------------------------------------------------

이 부분을 드레그 해보세요

원래는 ● 이었으나 바꿘모습

---------------------------------------------------------------------------

방문한 적이 없는 링크⑭
방문한 적이 있는 링크⑭

체크하면 색상변경⑭

---------------------------------------------------------------------------

01 ⑮

02 ⑮

03 ⑮

04 ⑮

05 ⑮

06 ⑮

07 ⑮

08 ⑮

'CSS' 카테고리의 다른 글

CSS - float, clear (0)	2023.04.04
CSS position - relative, absolute, fixed, sticky, z-index (0)	2023.04.04
CSS box관련 - margin, border, padding, content (0)	2023.04.02
CSS 텍스트 스타일 (0)	2023.04.01
CSS 문법 형식 (0)	2023.03.20

◈학습중◈ㅤㅤㅤㅤㅤㅤㅤ틀린 부분ㅤㅤㅤㅤㅤㅤ지적 바랍니다.

CSS 선택자 이용방법

'CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바