Помогите прописать css значение тегу

[anfriska]

Имеется код.

<li class="selected"><span class="home"><a class="tll" href="/" onclick="SelectLink(this)">Главная</a>
 </span></li>

для

<li class="selected"><span class="home">

нужно дать значение
border-radius: 7px 0 0 7px;

Как это сделать в CSS ?

 

[Sorcus]

.selected .home {
border-radius: 7px 0 0 7px;
}

По-моему как-то так...Наверное

 

[The_Wolf]

можно и так :

.selected .home {
border-top-left-radius: 7px;
border-bottom-right-radius: 7px;
}

 

[anfriska]

уже пробовала так, не закругляется

 

[The_Wolf]

Только для .home или .selected задать...Вдруг поможет

ну да . вот так :

.selected {
border-radius: 7px 0 0 7px;
}
.home {
border-radius: 7px 0 0 7px;
}

 

[anfriska]

У меня все немного сложнее.
Для selected уже есть значение

Спойлер

#supermenu ul li.selected {
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
}

[/spoil]
и оно перекрывает это
[spoil]

.selected .home {
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
border-radius: 7px 0 0 7px;
}

а первое значение мне нужно т.к. оно отображает другие кнопки в меню без закруглений.
То есть надо чтобы только selected с вложением home было с закруглением

 

[Denis_Pi]

Попробуй вот так тогда

и что ты этим изменил?!
Посмотрел сайт, решение...
в файле стилей supermenu.css найдите

Спойлер

#supermenu ul li.selected{
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
}

[/spoil]
и замените на
[spoil]

#supermenu ul li.selected{
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-khtml-border-radius: 8px 0 0 8px;
}

[/spoil]
Результат:
[spoil]
Для просмотра ссылки Войди или Зарегистрируйся

 

[anfriska]

Возникает другая проблема.
selected на все кнопках теперь закгрулен, а надо чтобы только на первой (главная). Для первой кнопки в неактивном состоянии, я сделала закругление добавив span home. А в активном состоянии никак не могу закруглить.

 

[Denis_Pi]

что бы скругление применялось только для "Главной"
верните стиль #supermenu ul li.selected - в исходное состояние т.е:

Спойлер

#supermenu ul li.selected{
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
}

[/spoil]
а ниже пропишите:
[spoil]

#supermenu ul li:first-child.selected{
position: relative;
float: left;
background: url('menu_active.gif') repeat-x top left;
color: #ffffff;
z-index: 18;
border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-khtml-border-radius: 8px 0 0 8px;
}

[/spoil]
З.ы.
Скругление в неактивном состоянии кнопке даёт не span class="home" - этот класс таки бесполезен,
а стиль для всего блока меню)
т.е. вот этот:
[spoil]

#supermenu {
background: url('menu_bg.gif') repeat-x top left;
height: 42px;
margin-bottom: 5px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-khtml-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

 

[anfriska]

Денис, не хотелось бы показаться наглой, но убрала home и теперь в при ховере, кнопка главная не закруглена )