CSS Selector...더 많이 있지만 필요한 개념 몇 가지만 정리한다.
1. Type Selectorsh1 {font-family: sans-serif}- 가장 흔히 볼 수 있는 selector이며 body 안의 <h1> 태그(element)가 있을 경우 sans-serif 폰트를 적용한다.
2. Universal Selector* {font-family: sans-serif}- <body>안의 모든 태그(element)들에 sans-serif 폰트를 적용한다.
- div table p a h1.....{font-family: sans-serif}등 여러 태그(element)들을 selector로 나열 할 수 있지만 간단히 "*" 하나면 body 안의 모든 tag에 적용 할 수 있다.
- 또한 decendent selector와 같이 사용한다면 특정 태그 안의 모든 태그를 지정할때는 universal selector(*)로 간단히 적용 시킬 수 있다.
예) div * {font-family: sans-serif} - <div> tag안에 모든 태그(element)들에 대해 sans-serif 폰트를 적용한다.
3. Decendent Selectorsh1 em { color: blue }- 여러개의 자손(decendent) 태그(element)들로 이루어진 selector이다.
- 즉 <h1>태그안의 <em>태그에만 blue color를 적용한다. 위 예제에서 em (element)태그가 자손(decendent) 관계에 있다.
(html 예제)
<body>
<h1>
<em>This is blue font</em>
</h1>
</body>
그런데 만약 아래 같이 <h1> 과 <em> 사이에 다른 태그가 섞여 있다면 어떻게 될까?
<body>
<h1>
<p>
<em>This is blue font</em>
</p>
</h1>
</body>
결과는 ancestor relation(조상관계)라고 해서 속성이 em 태그에 속성이 적용된다.
영어로 설명 하자면...<em> tag is child of <p>tag...<p>tag is child of <h1> tag...<em> tag is grand child of <h1>...ㅡㅡ;
영어로는 이들 관계를 부모, 자식, 조상 관계라고 표현하는데 이해하기 편하게 그렇게 부르는것 같다. 하지만 이해하기 더 어렵다는것....
참고로 <em> 태그는 이택릭체를 의미하는 html font 태그이다.
4. Child Selectorsbody > P { color: blue }- body P { color: blue } Decendent Selectors 의 경우 <body> 태그 안의 모든 <p>태그에 blue color가 적용되지만 body > P { color: blue } 의 경우 <body> tag안에 바로 붙어 있는 <p>태그에만 blue color가 적용된다.
- direct child일 경우에만 적용된다라고 생각면 될것 같다.
5. Questioin?아래 html문서는 어떻게 나타날것인가?
HTML sample
<head>
<style type="text/css">
* { color: blue; background-color: yellow; }
p.test * em { color: white; background-color: red; }
</style>
</head>
<body>
<p class="test">
blue font color and yellow backround
<span>
<em>white font and red backround color</em>
</span>
</p>
</body>
- <p> 태그의 클래스 test 안의 모든 태그는 Universal Selector(*)를 적용 받아야 하지만 em 태그의 경우에는 Decendent Selectors 영향으로 폰트 색상은 white, 배경색은 red 컬러가 적용된다.
참고자료 :
http://www.w3.org/TR/CSS21/selector.html
Leave your greetings.