CSS Selector에 대해 알아봅시다~ [응용편 #2]

다른 응용방법, 자기 자신에 대한 class를 선택하는 방법(?)을 보시겠습니다.

<ul>

<li>1</li>
<li>2</li>
<li>3</li>

</ul>

<ol>

<li>a</li>
<li>b</li>
<li>c</li>

</ol>

 

.list {

list-style:none;
margin-left:20px;

}

디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.
이렇게 서비스를 하던 어느날, ol 의 list 의 색깔을 바꾸고 볼드체를 주도록 변경이 되었다고 하겠습니다.

그렇다면 위에서 배웠던 하위 선택자를 써서 해보겠습니다.

.list {

list-style:none;
margin-left:20px;

}

ol .list {

color:red;
font-weight:bold;

}

헙..!! 그런데 이렇게 하니깐 안됩니다..ㅠ,.ㅠ
이유를 아시는 분 계시나요..?
그럼 여기서 잠깐 30초에서 1분동안 왜 안될지 생각을 해 봅시다..!!

30초에서 1분동안 생각해보셨나요..?
어떤가요? 답이 나오셨나요..?
혹시나, 바로 스크롤을 내리신건 아니시죠…오~~~~???

정답은 바로…!!!
이 녀석은 ol 의 하위에 있는 녀석이 아니기 때문입니다.
즉 무슨말이냐 하면. ol 밑에있는 li 라면 하위선택자로 선택을 해야겠지만..
이 ol은 자기 자신이기 때문입니다.
무슨 말인지 이해 하셨나요..?
list라는 class가 li에 있는게 아니고, ol 자신에게 선언된것이란거죠..
아직 아리송 하시다고요..? 일단 코드 보시죠..

<ol class=”list”>

<li>a</li>
<li>b</li>
<li>c</li>

</ol>

인거지

<ol>

<li class=”list”>a</li>
<li>b</li>
<li>c</li>

</ol>

이게 아니니깐요..
이해 하셨죠..? 못하셨다면. 위 예제코드를 한번 더 보시면 도움이 되실꺼에요.

자, 이런 경우는 어떻게 해야하나..

.list {

list-style:none;
margin-left:20px;

}

ol.list {

color:red;
font-weight:bold;

}

이렇게 하면 됩니다. 공백없이 붙여 쓰는것이지요
좀 더 응용을 하면.

.list {

list-style:none;
margin-left:20px;

}

ul.list
{

color:blue;
text-decoration:underline;

}

ol.list
{

color:red;
font-weight:bold;

}

이런식으로 선언을 할 수 있겠죠.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중