Селектиране на лист

[ventsi34]

Здравейте, от няколко часа се опитвам да селектирам първи елемент на един лист айтъм с определен клас. Код

<nav>
<ul id="mainMenu" class="clear">
<li class="mainMenuCurrent"><div class="menuSeparator"><a href="#" title="about">about</a></div></li>
<li class="mainMenuCurrent"><div class="menuSeparator"><a href="#" title="contact">contact</a></div></li>
<li><div class="menuSeparator"><a href="#" title="sitemap">sitemap</a></div></li>				
<li><div class="menuSeparator"><a href="#" title="online products">online products</a></div></li>					
<li><div class="menuSeparator"><a href="#" title="home">home</a></div></li>
<li><div class="menuSeparator"><a href="#" title="articles">articles</a></div></li>
	</ul>
</nav>

Трябва ми за едно меню, в което първия елемент трябва да е леко заоблен когато е кликнато върху него, а всичко останали елементи да са си нормални. В момента когато му задам класа на първият елемент си стой с прави ъгли.

 

[shterev]

как да го селектираш, javascript ли използваш или само с CSS искаш да стане номера? Дай да видим и CSS щом не работи ръчно поставен класа

 

[ventsi34]

ръчно поставен клас си работи но в Wordpress не знам как да сложа различен клас за първият елемент само и за това ми трябва екзотичен селектор. Правя го само с CSS. Ето кода

[css]
#mainMenu{
margin-top: 18px;
width: 938px;
padding-right: 10px;
background: #595e52 url(../img/headMenuRepeater.gif) repeat-x;
border-radius: 15px;
box-shadow: 4px 5px 10px #bdb796;
word-wrap: break-word;
z-index: 1;
}
#mainMenu li{
max-width: 935px;
word-wrap: break-word;
float: left;
position: relative;
z-index: 1;
}
.menuSeparator{
background: url(../img/headMenuSeparator.gif) no-repeat 100% 0;
padding-right: 3px;
}
#mainMenu li a{
padding: 0 20px 0 20px;
line-height: 42px;
color: #fff;
font-size: 1.4em;
display: block;
z-index: 1;
}
#mainMenu li a:hover{
background: #5a5e52 url(../img/headMenuRepeaterHover.gif) repeat-x 2px 2px;
}
#mainMenu li:first-child a:hover{
background: #5a5e52 url(../img/headMenuRepeaterHover.gif) repeat-x 2px 2px;
border-radius: 15px 0 0 15px;
}
#mainMenu .mainMenuCurrent{
background: #5a5e52 url(../img/headMenuRepeaterHover.gif) repeat-x 2px 2px;
}
.mainMenuCurrentRadius{
background: #5a5e52 url(../img/headMenuRepeaterHover.gif) repeat-x 2px 2px;
border-radius: 15px 0 0 15px;
}
#mainMenu li ul{
position: absolute;
display: none;
z-index: 20;
}
#mainMenu li ul li {
background: #5a5e52;
width: 200px;
float: none;
z-index: 2;
}
#mainMenu li ul li a{
z-index: 2;
}
.sub-menu .menuSeparator{
background: none;
padding: 0;
}
#mainMenu li .sub-menu li:first-child a:hover{
background: #5a5e52 url(../img/headMenuRepeaterHover.gif) repeat-x 2px 2px;
border-radius: 0;
}
#mainMenu li:hover ul{
display: block;
top: 100%;
}
[/css]

 

[shterev]

еми то освен с :first-child не знам без js как ще стане. Просто
#mainMenu li:first-child:hover { background:....} нещо такова за да смениш стула или там бордер ли каквото е или можеби ако посочваш ul може да е така ul:hover li:first-child и да му се сменя стила

 

[ventsi34]

ама на мен не ми трябва при ховър за ховър съм го направил проблема ми е за current там самия wordpress си генерира един клас за current елемента но на всички елементи е еднакъв примерно това което генерира wp е

<ul>
<li class="current">asdasdas</li>
<li >asdasdas</li>
</ul>

а на мен ми трябва да разгранича първия от другите листове за да му сложа друг css. Ако може да ми дадете код на JavaScript който прави това пак става.

 

[adrian]

[css]#mainMenu li.current-menu-item:first-child { }

#mainMenu li.current-menu-item:first-child a { }[/css]

:first-child работи до IE 7.