CSS 부모 자식 선택자 여러개

특정한 태그를 선택하여 CSS로 디자인하고자 할때에 선택자를 사용하게 되지만 더 복합한 특정한 선택자만 선택할때라면 부모 자신 선택자를 사용하거나 하위태그 선택, 다중 신택자를 사용해 볼수가 있습니다.

하위태그 선택자

아래의 예제에서 보는거과 같이 ul 태그 하위에 있는 li 태그를 선택하여 색상을 지정하게 되며, 다른 ol 태그의 li 태그에는 적용되지 않는것을 확인할수가 있습니다.

 <!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
 ul li{
   color:blue; }
 </style>
 </HEAD>
 <BODY>
   <ul>
   <li>html</li>
   <li>CSS</li>
   <li>JavaScript</li>
   </ul>
   <ol>
	<li>PHP</li>
	<li>WordPress</li>
   </ol>  
 </BODY>
</HTML>

부모자식선택자

특정한 아이디선택자를 선택하기 위해서 사용하게 되면 예제와 같이 #selector 하위에 있는 li 태그만을 선택하여 컬러, 보드값을 적용한것입니다.

 <!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
 #selector>li{
	color:blue;
    border:1px solid red; }
 </style>
 </HEAD>
 <BODY>
   <ul>
   <li>html</li>
   <li>CSS</li>
   <li>JavaScript</li>
   </ul>

   <ol id="selector">
	<li>PHP</li>
	<li>WordPress</li>
   </ol>  
 </BODY>
</HTML>

다중선택자

사용자가 특정한 선택자들만 선택하여 디자인하고자 할때에 동일한값을 주기 위해서 예제와 같이 ul, ol 모든태그가 CSS를 적용할수가 있습니다.

 <!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
 ul, ol{
	background-color: yellow;
	color: gray; }
 </style>
 </HEAD>
 <BODY>
   <ul>
   <li>html</li>
   <li>CSS</li>
   <li>JavaScript</li>
   </ul>

   <ol id="selector">
	<li>PHP</li>
	<li>WordPress</li>
   </ol>  
 </BODY>
</HTML>