티스토리 뷰
css
:선택자(selector)
| 부모 자식 선택자
1. 모든 자식에게 적용 ( ul 밑의 모든 li 에게 css 적용)
ul li{
}2. 직계 자손에만 적용 ( id가 example인것 바로 아래 li에만 적용)
#example > li{
}3. 모두에게 적용 (ul태그와 ol 모두에 적용)
ul,ol {
}[예제]
1, 2, 3 사용된 예제 코드
<html>
<head>
<style>
// ul 밑의 모든 li 에 적용
ul li{
color:red;
}
// #lecture밑의 직계자손 li에만 적용
#lecture>li{
border:1px solid red;
//color: blue; <- 예외 property, 직계자속에만 적용 되는것이 아니라 다른 자식들도 적용, 상속과 관련
}
// 두가지에게 모두 적용
ul,ol{
background-color: powderblue;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>| 선택자 공부 팁
- css에서 선택자는 주어 역할을 함.
- css selector 학습 참고 주소: http://flukeout.github.io/
- css cheat sheet 차모하면 개발에 좋음
| Psedo Class Selector
<html>
<head>
<style>
a:link{
color: black;
}
// 방문
a:visited{
color: red;
}
// 클릭시
a:active{
color: green;
}
// 마우스 위에 올라갔을시
a:hover{
color: yellow;
}
// focus 시에, 가장 맨 뒤에 놓는게 좋음, input에 많이쓰임
a:focus{
color: white;
}
</style>
</head>
<body>
<a href=""></a>
<a href=""></a>
</body>
</html>hover, active 동시에 해당될때는 뒤에 것 실행 (클릭과 hover 가 동시에 일어나므로)
- :link – 방문한 적이 없는 링크
:visited – 방문한 적이 있는 링크
:hover – 마우스를 롤오버 했을 때
> 더 많은 pseduo class selector
- 참고링크: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
'Front end > css' 카테고리의 다른 글
| css - 스켈레톤 UI css 만으로 구성하기 with react (0) | 2019.01.24 |
|---|---|
| CSS - css 쉽게 가운데로 수직 정렬하기 (1) | 2018.10.25 |
| css - transition 관련 참고하면 좋을 링크 (0) | 2018.07.11 |
| css-레일스 프로젝트에서 scss 파일로 클래스명명, 반복된 코드줄이기 (0) | 2018.02.25 |
| CSS - Sass란 ? (0) | 2018.02.22 |
댓글