메인 메뉴 중 특정메뉴만 색을 다르게 표시

암만 찾아봐도 메뉴 css 만 보이더군요 혹시 순서를 정해서 코드를 삽입 하고 css 를 입혀야 할까요... 검색을 해봐도 안나오고 해서 답답하여 질문 올려 봅니다 ㅎㅎ

현재 사용중인 레이아웃 입니다
https://xe1.xpressengine.com/index.php?mid=download&package_id=18642464
엘카님거에요 제가 아직은 if문을 아직 몰라서요 배운다 배운다 하고 못하고 있네요 ...

css로 하셨다니 다행이에요ㅎㅎ

광복절에 하나 배우고 갑니다
감사 합니다 if 빨리 배워야 할것 같습니다

감사 합니다
지금 한번 검색을 해볼게요 ㅎㅎ

진짜 감사 합니다 이거 바로 됩니다 ㅎㅎㅎ
#gnb .li1:nth-child(7) {
background: red;
}
이렇게 했습니다 숫자7은 자신이원하는 특정메뉴 순서 입니다
이거 정말 좋습니다
다시 한번 감사 합니다

 

 

:nth-child(number) {
    css declarations;
}

;)

nth-child는 숫자만 넣으면 해당 번째의 것에만 적용되죠.

추가로 맨 앞에 nth이름에서 알수 있듯이 n방정식이 가능합니다.
2n은 짝수를 의미합니다. 2n은 even으로 대체가 가능하죠.
2n+1은 홀수, odd입니다.

이를 응용하면 한줄에 3개의 요소가 있고 줄넘김을 해야 할때 매 3번째마다 오른쪽 여백을 없애려고 한다면
nth-child(3) { margin-right: 0; }
nth-child(6) { margin-right: 0; }
nth-child(9) { margin-right: 0; }
nth-child(12) { margin-right: 0; }
이렇게 계속 쓰는 것이 아니고
nth-child(3n) { margin-right: 0; }
이렇게 하면 됩니다.

실전에서는 3n+1같이 들어가 있는 요소에 따라서 1을 더해주거나 하는 등이 필요할수도 있더군요.
(계산 실수로 인해....)

비슷한 것은 nth-of-type라는 것이 있고
first-child, last-child같은 것도 있습니다.

"css 선택자"던가?로 검색하면 자세한 정보를 찾으실 수 있을꺼에요.

역시 감사 합니다 이번에 정말 귀한거 하나 배웠습니다 ㅎㅎ

2차메뉴 자간 넓이를 다르게 할려구 비슷한 방법으로

.gpe_munu{position:absolute; left:0px; top:0px;}
/*└(1차메뉴)*/
.gpe_munu ul.topnav{position:relative; text-transform:none; }
/*.gpe_munu ul.topnav .topnav_line_hide{position:absolute; right:1; top:11px; width:2px; height:13px;} 1차메뉴 우측라인 숨김*/
.gpe_munu ul.topnav:nth-child(2) {letter-spacing: 0px;}
.gpe_munu ul.topnav li.mnav_li{position:relative; float:left;}
.gpe_munu ul.topnav a.mnav{display:block; width:100px; height:49px; line-height:49px; color:#d5d5d5; font-size:16px; font-weight:800; text-align:center;}/*1차메뉴*/
.gpe_munu ul.topnav a.mnav:hover{text-decoration:underline;background-color:#fff;}
.gpe_munu ul.topnav a.mnav.active{color:#fff200; text-decoration:none;}
/*└(2차메뉴)*/
.gpe_munu ul.subnav_d02_m{position:relative; margin-top:-1px; clear:both; background-color:#fff; text-align: center; letter-spacing: 10px; border:1px solid #ff4948; border-top:0; text-transform:none; display:none; zoom:1;
-moz-box-shadow:1px 1px 4px rgba(1,1,1,0.9); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); box-shadow:1px 1px 4px rgba(0,0,0,0.1);}
.gpe_munu li.subnav_d02{position:relative;}
.gpe_munu li.subnav_d02 a{display:block; width:98px; font-size:13px; line-height:26px; padding-left:4px; zoom:1;}/*2차메뉴*/
.gpe_munu li.subnav_d02 a.on2{color:#000; background-color:#ededed; zoom:1;}/*2차 활성시*/
.gpe_munu li.subnav_d02 a.on2_no{color:#4f4f4f; background-color:#fff; zoom:1;}/*2차 기본*/
.gpe_munu li.subnav_d02 a.on2_no:hover{color:#000; background-color:#f6f6f6; zoom:1;}/*2차 오버시*/


css 수정해봤는데 변화가 없네요 ㅠㅠ 어떤 부분에 nth-child 넣어야하는걸까요..

html 부분이 없네요.
이것만 봐서는 알수가 없어요.
url을 남겨주세요.