CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소

f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값뒤에 하이픈( - ) 붙은 요소 반환 )
- [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"]
a[href|="naver"] { <== naver 또는 naver- 요소반환.

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자6-속성6-속성값또는속성값하이픈요소반환</title>
    <style>
        div[class|="en"] {
            color: red;
        }
    </style>
</head>

<body>
    <div id="one">id="one"</div>
    <div class="en">class="en"(선택)</div>
    <div class="kr en">class="kr en"</div>
    <div class="kr">class="kr"</div>
    <div id="two" class="en-UK">class="en-UK"(선택)</div>
</body>

</html>

g. 속성명~="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 앞뒤로 공백이 포함된 값 목록에 존재하는 요소 반환 )
- [속성명~="속성값"] 표현식, 태그명[속성명~="속성값"]
a[href~="naver"] { <== naver 또는 ko naver 요소반환.

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자6-속성7-속성값또는공백이포함된목록</title>
    <style>
        div[class~="en"] {
            color: red;
        }
    </style>
</head>

<body>
    <div id="one">id="one"</div>
    <div class="en">class="en"(선택)</div>
    <div class="kr en">class="kr en"(선택)</div>
    <div class="kr">class="kr"</div>
    <div id="two" class="en-UK">class="en-UK"</div>
</body>

</html>

* BEM 패턴( Block, Element, Modifier )
- https://nykim.work/15 참고

BEM은 Block, Element, Modifier를 뜻합니다. 저 세 가지로 구성된 이름을 짓는 거죠! 그리고 각각 __와 --로 구분합니다.

.header__navigation--navi-text {   color: red; }

6. 의사 클래스 ( pseudo class ) 와 의사 요소 ( pseudo elements )
1) 개념
- 이름안에 어떤 기능인지를 내포하고 있음.

2) 의사 클래스 ( pseudo class )
- 문법:
:클래스명

- 기능: 스타일을 지정하거나 마우스오버 및 a 태그의 3가지 상태(state) 인
방문전( blue ), 방문후( purple ), 활성화( red, 누르고 있을 때 ) 링크 색상을 변경할 수 있음.

가. a 태그의 link 의사 클래스

a:link{ color:red; } /* 방문전 */
a:visited{ color:green; }  /* 방문후 */
a:hover{ color:yellow; }  /* 마우스 오버 */
a:active{ color:blue; }  /* 누르고 있을 때 */

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스1_a태그</title>
    <style>
        /* 방문전 */
        a:link {
            color: red;
        }

        /* 방문후 */
        a:visited {
            color: green;
        }

        /* 마우스 오버 */
        a:hover {
            color: yellow;
        }

        /* 누르고 있을 때 */
        a:active {
            color: blue;
        }

        /* input 태그에 focus 할시 */
        input:focus {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <a href="#" target="_blank">This is a link1</a><br>
    <a href="http://daum.net" target="_blank">This is a link2</a><br>
    <br>
    아이디:<input /><br>
    비번:<input /><br>
</body>

</html>

나. input 태그 focus 클래스 <---> blur: focus 잃어버렸을때

input:focus {
background-color:yellow;
}

# DOM 트리에서 자식선택하는 의사 클래스 ( 기준은 지정된 태그의 부모가 기준 ( ****** ) )
다. 지정된 태그의 부모기준인 첫번째 자식
- 문법:
선택자:first-child {

}

ex)
p 태그를 찾고 찾은 p 태그의 첫 번째 자식을 반환. ( x )
p 태그의 부모를 찾고 그 부모의 첫번째 자식인 p태그 반환. ( o )
p:first-child {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스2_first-child</title>
    <style>
        /* i 태그의 부모를 찾고 찾은 i 태그의 첫번째 자식인 i 태그 반환 */
        i:first-child {
            color: red;
        }
    </style>
</head>

<body>
    <p>I am a
        <i>strong</i> man. I am a
        <i>strong</i> man.
    </p>
    <p>I am a
        <i>strong</i> man. I am a
        <i>strong</i> man.
    </p>
</body>

</html>

라. 지정된 태그의 부모기준인 마지막 자식
- 문법:
선택자:last-child {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스3_last-child</title>
    <style>
        /* i 태그의 부모를 찾고 찾은 i 태그의 마지막 자식인 i 태그 반환 */
        i:last-child {
            color: blue;
        }
    </style>
</head>

<body>
    <p>I am a
        <i>strong</i> man. I am a
        <i>strong</i> man.
    </p>
    <p>I am a
        <i>strong</i> man. I am a
        <i>strong</i> man.
    </p>
</body>

</html>

마. 지정된 태그의 부모기준인 유일한 자식
- 문법:
선택자:only-child {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스4_only-child</title>
    <style>
        /* 유일한 자식으로 된 모든 p 태그 반환 */
        p:only-child {
            color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
    </div>
    <div>
        <p>2</p>
        <p>3</p>
    </div>
</body>

</html>

바. 지정된 태그의 부모기준인 n 번째 자식 ( 1부터 시작 )
- 문법:
선택자:nth-child(n) { <== n번째 위치

}
선택자:nth-child(2n) { <== 짝수번째, n에 1부터 시작해서 2,3,4 치환됨.

}
선택자:nth-child(2n+1) { <== 홀수번째.

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스5_nth-child(n)</title>
    <style>
        p:nth-child(2) {
            color: red;
        }

        p:nth-child(2n) {
            /* 짝수번째 */
            background-color: yellow;
        }

        p:nth-child(2n+1) {
            /* 홀수번째 */
            font-size: 25px;
        }
    </style>
</head>

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</body>

</html>

사. 지정된 태그의 부모기준인 짝수번째/홀수번재 자식
- 문법:
선택자:nth-child(even) { <== 짝수번째

}
선택자:nth-child(odd) { <== 홀수번째

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스5_nth-child(n)</title>
    <style>
        tr:nth-child(even) {
            background-color: yellow;
        }

        tr:nth-child(odd) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
    </table>
</body>

</html>

##########################################################################################

아. 부정선택자
- 문법:
:not(선택문법) {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스6_부정선택자</title>
    <style>
        tr:not(tr:nth-child(even)) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td>444</td>
            <td>555</td>
        </tr>
    </table>
</body>

</html>

자. input 태그에서 check 된 요소 반환 ( **** )
- 문법:
input:checked {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스7_checked</title>
    <style>
        input:checked {
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    사과 <input type="checkbox" />
    배 <input type="checkbox" />
    바나나 <input type="checkbox" />
</body>

</html>

차. input 태그에서 enable/disable 된 요소 반환
- 문법:
input:enabled {

}
input:disabled {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스8_enabled_disabled</title>
    <style>
        input:enabled {
            background-color: yellow;
        }

        input:disabled {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 값 고정 -->
    <input type="text" value="xxxx7777" disabled> <!-- disabled="disabled" 동일 -->
    pw <input type="text">
</body>

</html>

disabled 가 있다면 그 부분은 input 태그로 되어있어도 값이 고정되어있다.

카. 지정된 선택자에서 자식이 없는 요소 반환
- 문법:

선택자:empty{

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자7-의사클래스9_empty</title>
    <style>
        p:empty {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p></p>
    <p>홍길동</p>
    <p>이순신</p>
</body>

</html>

3) 의사 요소 ( pseudo elements )
- 문법:
::요소

- 의사클래스와 다르게 요소의 특정부분의 스타일을 지정할 수 있다.
 의사클래스는 전체(whole) 스타일 적용되고
 의사요소는 부분(part)스타일이 적용됨.

가. 문단의 첫줄 선택
- 문법:
p::first-line {

}

ex)

 hello1 
 hello2 
 hello3

나. 텍스트의 첫 글자
- 문법:
p::first-letter {

}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자8-의사요소1_first-line_first-letter</title>
    <style>
        p::first-line {
            color: red;
        }

        p::first-letter {
            font-size: 40px;
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <p>
            AAA1<br>
            AAA2<br>
            AAA3<br>
        </p>
        <p>
            BBB1<br>
            BBB2<br>
            BBB3<br>
        </p>
        <p>
            CCC1<br>
            CCC2<br>
            CCC3<br>
        </p>
    </div>
</body>

</html>

다. 특정요소 컨텐츠( content, body ) 앞에 삽입 or 뒤에 삽입
- 문법:
p::before {
content:'값'
}
p::after {
content:'값'
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자8-의사요소2_before & after</title>
    <style>
        p::before {
            content: '안녕하세요.';
            color: blue;
        }

        p::after {
            content: '감사합니다.';
            color: blueviolet;
        }
    </style>
</head>

<body>
    <p>Hello</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>선택자8-의사요소2_before & after2 img</title>
    <style>
        p::before {
            content: url('images/001.png');
        }

        p::after {
            content: url('images/favicon.png');
        }
    </style>
</head>

<body>
    <p>Hello</p>
</body>

</html>

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

CSS 3일차 - 2일차 정리 및 수정 (0)	2024.04.24
CSS 2일차 - Box Model, box-sizing, margin, padding, border (1)	2024.04.23
CSS 1일차 - 선택자 (0)	2024.04.22
CSS 1일차 - 적용방법3가지, 캐스캐이딩 & 명시도 (0)	2024.04.22
HTML 2일차 - 시멘틱 태그, 사용자 입력, form, img, iframe, 특수문자 (0)	2024.04.22

yoon9i

CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

티스토리툴바

CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

관련글

티스토리툴바