선택자2(가상요소 / 속성)

가상 요소 선택자(선택요소::before/after)

 

선택요소 내부 내용의 앞/뒤에 content(text/url/image)를 삽입

/* ul>li{$}*5 + tab */
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* content 뿐아니라 스타일도 적용가능 */
ul li::before {
    /* content라는 속성 필수(content: ""라도 적어줘야 함) */
    content: "Num : ";
    font-weight: bold;
    color: royalblue;
}

ul li::after {
    content: url("https://heropy.blog/css/images/logo.png");
}

 

속성 선택자(해당하는 속성을 가진 요소를 선택)

 

이름을 따로 짓는 수고를 덜 수 있음- class를 부여 할 필요 X

<input type="text" value="dev">
<input type="text" value="disabled text" disabled> 
<button class="btn-success">success</button>
<button class="btn-danger">danger</button>

/* html 속성에 :disabled가 있으면 선택하겠다*/
[disabled] {
    opacity: 0.1;
}

/* 속성의 값에 따라 선택도 가능 */
[value="dev"] {
    color: red;
}

/* btn-으로 시작하는 속성값 요소 선택 */
[class^="btn-"] {
    color: royalblue;
}

/* btn-으로 끝나는 속성값 요소 선택 */
[class$="-danger"] {
    color: red;
}