티스토리 뷰
연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 한정시킴
하위 선택자 : 지정한 모든 하위 요소에 스타일 적용
- 형태 : [상위요소] [하위요소]
<style>
#container ul {
color : blue;
}
</style>
<section id="container">
<header>==</header>
<p>-----</p>
<ul>
<li>111111
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</section>
자식 선택자 : 자식 요소에만 스타일 적용
- 형태 : [부모요소] > [자식요소]
<style>
#container > ul {
color : blue;
}
</style>
<section id="container">
<header>==</header>
<p>-----</p>
<ul>
<li>111111
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</section>- 위와 같을 때, 3가지의 <ul>요소 중 첫 번째 <ul>요소에만 스타일이 적용
인접 형제 선택자 : 가장 가까운 행제 요소에 스타일 적용
- 형태 : [요소 1] + [요소 2]
<style>
h1 + ul {
color: blue;
font-weight: bold;
}
</style>
<section id="container">
<h1>---------</h1>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</section>- 위와 같을 때, <h1>태그의 형제 요소들 중 맨 먼저 오는 <ul>요소에 스타일 적용
형제 선택자 : 형제 요소에 스타일 적용
- 형태 : [요소 1] ~ [요소 2]
<style>
h1 ~ ul {
color: blue;
font-weight: bold;
}
</style>
<section id="container">
<h1>---------</h1>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</section>- 위와 같을 때, <h1> 요소의 동생들 중 모든 <ul> 요소에 스타일 적용
속성 선택자 : 태그 안에서 사용하는 속성들의 값에 따라 스타일 지정
[속성] : 지정한 속성에 스타일 적용
- 형태 : [속성]
<style>
a[href] {
background: yellow;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</body>- 위와 같을 때, <a>태그 중 href라는 속성이 있는 요소를 찾아내 스타일 적용
[속성 = 값] : 특정 값을 갖는 속성에 스타일 적용
- 형태 : [속성 = 값]
<style>
a[target="_blank"] {
background: yellow;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="#" target="_blank">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</body>- 위와 같을 때, target 속성 값이 "_blank"인 링크를 찾아 스타일 적용
[속성 ~= 값] : 여러 값 중 특정 값이 포함된 속성에 스타일 적용
<style>
.flat {
background: yellow;
}
[class~="button"] {
border: 2px solid black;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="button">2</a></li>
<li><a href="#" class="flat button">3</a></li>
</ul>
</body>
- 위와 같을 때, "flat button"은 button 과 flat에 포함되어 있으므로 두 스타일 모두 적용
[속성 |= 값] : 특정 값이 포함된 속성에 스타일 적용
- 값은 한 단어로 일치해야 함
<style>
a[title |= "us"] {
background: gray;
}
a[title |= 'jap']{
padding: 5px;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="#" title="us">1</a></li>
<li><a href="#" title="us-english">2</a></li>
<li><a href="#" title="japanese">3</a></li>
</ul>
</body>- 위와 같을 때, 속성 값이 'us' / 'jap'이거나 'us' / 'jap'로 시작하는 요소를 찾아 스타일 적용
[속성 ^= 값] : 특정 값으로 시작하는 속성에 스타일 적용
- 캐럿(^)이 붙으면 지정한 문자로 시작하는 속성 값에 대해서 스타일 적용
<style>
a[title ^= "eng"] {
background: gray;
}
a[title ^= 'jap']{
padding: 5px;
}
a[title ^= 'chi']{
margin: 10px;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="#" title="english">1</a></li>
<li><a href="#" title="japanese">2</a></li>
<li><a href="#" title="chinese">3</a></li>
</ul>
</body>
- 위와 같을 때, 'eng' / 'jap' / 'chi' 로 시작하는 요소를 찾아 스타일 적용
[속성 $= 값] : 특정 값으로 끝나는 속성에 스타일 적용
- 파일의 확장자, 즉 파일 이름의 마지막 값을 찾을 때 사용
<style>
a[href $= "hwp"] {
background: gray;
}
a[href $= "xls"]{
padding: 5px;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="index.hwp">1</a></li>
<li><a href="title.xls">2</a></li>
</ul>
</body>
- 위와 같을 때, 'hwp' / 'xls'로 끝나는 파일을 찾아 스타일 적용
[속성 *= 값] : 값의 일부가 일치하는 속성에 스타일 적용
<style>
[href *= "cho"] {
background: gray;
}
</style>
<body>
<ul>
<li><a>-------</a></li>
<li><a href="cho-coding.tistory.com">1</a></li>
<li><a href="chocolate.com">2</a></li>
</ul>
</body>
- 위와 같을 때, 'cho'이 값에 포함되는 요소를 찾아 스타일 적용
'FRONT-END > CSS' 카테고리의 다른 글
| [CSS] TRANSFORM - 변형 (0) | 2019.01.23 |
|---|---|
| [CSS] PSEUDO CLASS - 가상 클래스 (0) | 2019.01.22 |
| [CSS] POSITIONING (0) | 2019.01.21 |
| [CSS] BOX MODEL (0) | 2019.01.21 |
| [CSS] GRADATION (0) | 2019.01.21 |