문자 선택자
1. 특정 문자 또는 문자열을 선택하여 CSS 속성을 설정할 수 있다.
<body>
<div id="wrap">
<div id="header">
<h1>설립개요</h1>
</div>
<div id="content">
<p>중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의...</p>
<p id="history1">
2014 04월 09일<br />서울 산업진흥원 사명변경....
</p>
<p id="history2">
2013년 01월 12일<br />다누리 시민청 개관...
</p>
</div>
<div id="footer">
<ul>
<li><img src="#" /></li>
<li><img src="#" /></li>
</ul>
</div>
</div>
</body>
<style>
#wrap {
width: 500px;
}
#header {
border-bottom:1px solid #cccccc;
}
#history1:first-letter, #history2:first-letter { /* 문자 첫번째 글자를 2배로 키움 */
font-size:2em;
}
#history1:first-line, #history2:first-line { /* 문자 첫번째 줄을 파란색으로 한다 */
font-weight:bold;
color:blue;
}
#footer ul {
overflow:hidden;
border: 2px solid #cccccc;
}
#footer ul li {
list-style:none;
float:left;
}
</style>
※ 참고로 첫 문자에 <span>태그를 사용해 속성을 지정해서 글자를 키울 수도 있으나, 그렇게 하면 html 문서의 가독성이 떨어지거나 번잡해보일 수 있으므로 CSS 에서 작업을 해주는 것이 좋다.
2. 드래그되어 있는 문자들의 속성을 설정할 수 있다.
::selection
선택이 되어쓸때 적용되는 속성
위의 코드에다가 ...
#content p:first-child::selection{
background-color:yellow;
color:blueviolet;
}
이렇게 하면 설립개요의 첫번째 문단을 드래그할때 속성이 바뀐다!
링크 선택자
문서에서 링크(href)되어 있는 문자를 선택하여, CSS 속성을 설정할 수 있다.
일부만 가져와서 확인해보면..
<div id="content">
<ul>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li><a href="http://www.google.com" target="_blank">구글</a></li>
<li><a href="http://www.daum.net" target="_blank">다음</a></li>
<li><a href="http://www.inflearn.com" target="_blank">인프런</a></li>
</ul>
</div>
#content a::after {
content: '-' attr(href);
}
부정 선택자
나를 제외한 모든 태그에 CSS 속성을 적용할 수 있다.
<div id="content">
<ul>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li class="fa"><a href="http://www.google.com" target="_blank">구글</a></li>
<li><a href="http://www.daum.net" target="_blank">다음</a></li>
<li class="fa"><a href="http://www.inflearn.com" target="_blank">인프런</a></li>
</ul>
</div>
#content li:not(.fa){
background-color:yellow;
}
↑
해석은
li:not = li 중에서 .fa 클래스가 아닌 것
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - magin과 padding, box-sizing, background-image (0) | 2021.09.20 |
|---|---|
| CSS - 단위, url(), display 속성 (0) | 2021.09.20 |
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
| CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등 (0) | 2021.09.19 |
| HTML 비디오 태그, 폼 태그, 시멘틱 태그 (0) | 2021.09.17 |