Beny's Study

04.CSS선택자 (형제관계 태그 중 선택,문자선택자,부정선택자,일반구조선택자,형태구조선택자) 본문

CSS_VSC

04.CSS선택자 (형제관계 태그 중 선택,문자선택자,부정선택자,일반구조선택자,형태구조선택자)

76beny 2022. 6. 14. 14:09
 

 

일반구조선택자

■ 특정한 위치에 있는 태그 선택(위치로 구분)

<!DOCTYPE html>
<html>
<!-- 안중요 -->

<head>
    <title>CSS 선택자3</title>
    <meta charset="UTF-8">
    <style>
        /* 일반 구조 선택자 */
        /* 형제 관계 태그 중 첫번째 태그 선택 */
        
        #test1 p:first-child {
            background-color: red;
        }
        /* 형제 관계 태그 중 마지막 태그 선택 */
        
        #test1 :last-child {
            background-color: yellow;
        }
        /* 형제 관계 태그 중 앞에서 수열번째 태그 선택 */
        
        #test1 p:nth-child(2n) {
            background-color: yellowgreen;
        }
        /* 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
        
        #test1 p:nth-last-child(3n) {
            color: rgb(145, 255, 0);
        }
    </style>
</head>

<body>
    <h2>일반 구조 선택자</h2>
    <p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
    <div id="test1">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>
</body>

</html>
CSS 선택자3

일반 구조 선택자

특정한 위치에 있는 태그 선택(위치로 구분)

테스트1

테스트2

테스트3

테스트4

테스트5

테스트6

 

형태구조 선택자

■ 특정한 위치에 있는 태그 선택(태그별로 구분)

<!DOCTYPE html>
<html>
<!-- 안중요 -->

<head>
    <title>CSS 선택자3</title>
    <meta charset="UTF-8">
    <style>
        /* 형태 구조 선택자 */
        
        #test2 p:first-of-type {
            background-color: red;
        }
        
        #test2 p:last-of-type {
            background-color: yellow;
        }
        
        #test2 p:nth-of-type(2n) {
            background-color: yellowgreen;
        }
        
        #test2 p:nth-last-of-type(2n) {
            color: red;
        }
    </style>
</head>

<body>
    <h2>형태 구조 선택자</h2>
    <p>특정한 위치에 있는 태그 선택(태그 별로 구분)</p>
    <div id="test2">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>
</body>

</html>
CSS 선택자3

형태 구조 선택자

특정한 위치에 있는 태그 선택(태그 별로 구분)

테스트1

테스트2

테스트3

테스트4

테스트5

테스트6

 

문자선택자

■ 태그 내부에서 특정 조건의 문자를 선택하는 선택자

<!DOCTYPE html>
<html>
<!-- 안중요 -->

<head>
    <title>CSS 선택자3</title>
    <meta charset="UTF-8">
    <style>
        /* 문자 선택자 */
        
        #test3 p::first-letter {
            font-size: 2em;
        }
        
        #test3 p:first-line {
            background-color: yellowgreen;
        }
        
        #test3 p:after {
            content: "#### 끝 ####"
        }
        
        #test3 p {
            counter-increment: rint;
        }
        
        #test3 p:before {
            content: counter(rint) ".";
        }
        
        #test3 p::selection {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <h2>문자 선택자</h2>
    <p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
    <div id="test3">
        <p>문자 선택자1 영역입니다.</p>
        <p>문자 선택자2 영역입니다.</p>
    </div>
</body>

</html>
CSS 선택자3

문자 선택자

태그 내부에서 특정 조건의 문자를 선택하는 선택자

문자 선택자1 영역입니다.

문자 선택자2 영역입니다.

 

부정선택자

■ 지금까지의 선택자에 대해 반대로 적용하는 선택자

<!DOCTYPE html>
<html>
<!-- 안중요 -->

<head>
    <title>CSS 선택자3</title>
    <meta charset="UTF-8">
    <style>
        #test4 p:not(:nth-child(2n)) {
            background-color: orange;
        }
    </style>
</head>

<body>
    <h2>부정 선택자</h2>
    <p>지금까지의 선택자에 대해 반대로 적용하는 선택자</p>
    <div id="test4">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
    </div>
</body>

</html>
CSS 선택자3

부정 선택자

지금까지의 선택자에 대해 반대로 적용하는 선택자

테스트1

테스트2

테스트3

테스트4

테스트5

 

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."

 

'CSS_VSC' 카테고리의 다른 글

07. 문단스타일  (0) 2022.06.16
06. 글꼴 관련 스타일  (0) 2022.06.16
05. 선택자 우선순위  (0) 2022.06.14
02. CSS선택자(모든선택자,태그선택자,아이디선택자,클래스선택자)  (0) 2022.06.14
01. CSS 기본 문법  (0) 2022.06.14
'CSS_VSC' Related Articles more