CSS 실천 (6) 「결합자를 사용한 셀렉터의 지정」
1. 소개
이 기사에서는 CSS
결합자를 사용하여 선택기 지정
에 대해 설명한다.
2. 결합자를 사용한 셀렉터의 종류
<범례>
3. 유니버설 셀렉터
유니버설 셀렉터란?
모든 요소를 대상으로 하는 경우에 사용한다.
【샘플】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
* {
margin: 0;
}
【표시예】
4. 자손 선택기
후손 셀렉터란?
・부모와 그 자손이라는 형태로 지정하는 셀렉터.
· 부모와 자손은 반각 공간으로 구분한다.
・자손은 몇개라도 지정할 수 있다.
· id 셀렉터, class 셀렉터, 요소 셀렉터 등 다른 셀렉터와 조합하여 지정합니다.
【샘플】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
p strong {
color: red;
}
【표시예】
5. 아이 셀렉터
아이 셀렉터란?
・부모와 바로 아래의 요소로 지정하는 셀렉터.
・부모와 아이는 「>」로 단락짓는다.
・아이는, 몇개라도 지정을 할 수 있다.
・자손 셀렉터와 같이 id 셀렉터, class 셀렉터, 요소 셀렉터 등 다른 셀렉터와 조합해 지정한다.
・자손 셀렉터와의 차이는, 부모의 바로 아래의 요소만이 대상이 된다.
【샘플】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
p > strong {
color: red;
}
【표시예】
6. 인접 셀렉터
셀렉터를 + 로 단락지면, 같은 계층에 있는 요소끼리, 어느 요소의 직후에 인접하고 있는 요소를 대상에 스타일을 적용할 수가 있다.
【샘플】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
h2 + p {
color: red;
}
【표시예】
7. 간접 선택기
간접 셀렉터란?
· 부모 요소가 같은 형제 관계의 동생에게 적용되는 선택기.
・인접 셀렉터는 직후의 동생에 대해서만에 대해 형제 관계이면 사이에 다른 요소가 들어가도 적용된다.
【샘플】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
h1 ~ p {
color: red;
}
【표시예】
8. 결론
다음 항목: CSS 실천 (7) 「링크로 사용하는 의사 클래스」 「폰트・웹 폰트의 지정」 다음.
Reference
이 문제에 관하여(CSS 실천 (6) 「결합자를 사용한 셀렉터의 지정」), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Stack_up_Rising/items/f467ccd6d51327d99295텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
