navi

[Aidakaev]

Всем привет!

Подскажите пожалуйста решение такой проблемы:

Имеется навигация:

вот css код:

#navi li {float: left;
list-style-type: none;
border-right: 1px solid #006699;
font-size: 15px;}
#navi a {text-decoration: none;   /* удаляем подчеркивание ссылок */ 
margin: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */ 
color: #006699;   /* задаем цвет шрифта */ }

вот html:

<div id="navi">
   <ul id="navi">
   <li><a href="index.html">Главная</a></li> 
   <li><a href="#">Подбор тура</a></li> 
   <li><a href="#">Туры из Уфы</a></li> 
   <li><a href="#">Полезная информация</a></li> 
   <li><a href="#">О нас</a></li>
</ul>
</div>

Суть вопроса: как убрать на последней ссылке палочку

[Softlink]

последнему пункту списка присвоить отдельный класс, в котором указать те же стили, что и всем, только без бордера. Либо порулить родителем.

[Aidakaev]

сайт стоит на modx, задать отдельный класс не получится

[Softlink]

  On 7/1/2011 at 1:07 PM, Aidakaev said:

сайт стоит на modx, задать отдельный класс не получится

т.е. вы не можете вносить изменения в css и html?

Извините, но я не работал с modx. Может там действительно нельзя так делать. Хотя странно все это

[Aidakaev]

дело в том, что в modx создание навигации осуществляется путем добавления сниппета [!Wayfinder?!]

который автоматический задает код, в зависимости от создания раздела. в виде :

<ul>
   <li></li> 
   <li></li> 
</ul>

редактировать Css можно с помощью родителя #navi li и тд

[sigma77]

Aidakaev,

#navi li {
    border-left: 1px solid #006699;
}

#navi li:first-child {
    border: none;
}

[psywalker]

Aidakaev, Смотри дружище, это делается просто. Если тебе позволяет ситуация, то поменяй бордер на левый и стили дописать пунктам, сможешь?

упс, опоздал)

[Softlink]

можно попробовать с :last-child

как-то так:

ul :last-child {
border-right:0;
}

sigma77, а не <ul> ли надо задавать first и last?

и автору: только эти псевдоклассы не работают в ИЕ вплоть до 9-го

[Aidakaev]

  On 7/1/2011 at 1:34 PM, sigma77 said:

Aidakaev,

#navi li {
    border-left: 1px solid #006699;
}

#navi li:first-child {
    border: none;
}

в IE 9 работает

спасибо всем!

Edited July 1, 2011 by Aidakaev

[sigma77]

  On 7/1/2011 at 1:41 PM, Softlink said:

sigma77, а не <ul> ли надо задавать first и last?

и автору: только эти псевдоклассы не работают в ИЕ вплоть до 9-го

Нет не к ul. :first-child, :last-child - выбирают первый дочерний элемент из выборки. Т.е. браузер как бы присваивает первому элементу списка класс "first-child", по аналогии ul li.first-child. Только браузер делает это автоматически.

:last-child - не подходит, т.к. его не понимают ИЕ8 и ниже.

[Softlink]

Что-то не совсем понял. А почему у меня так работает:

ul :last-child {border:0px;}

li{
border:1px solid #000;
}
<ul>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
	</ul>

а вот так нет:

li :last-child {border:0px;}

li{
border:1px solid #000;
}

объясни пожалуйста

Про last понял, согласен

[mishka]

  On 7/1/2011 at 2:05 PM, Softlink said:

Что-то не совсем понял. А почему у меня так работает:

ul :last-child {border:0px;}

li{
border:1px solid #000;
}
<ul>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
	</ul>

а вот так нет:

li :last-child {border:0px;}

li{
border:1px solid #000;
}

объясни пожалуйста

Про last понял, согласен

пробел убери! почему .class .class2 это совсем не то что .class.class2 ?

[psywalker]

  On 7/1/2011 at 2:05 PM, Softlink said:

Что-то не совсем понял. А почему у меня так работает:

ul :last-child {border:0px;}

li{
border:1px solid #000;
}
<ul>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
		<li>список</li>
	</ul>

а вот так нет:

li :last-child {border:0px;}

li{
border:1px solid #000;
}

объясни пожалуйста

А потому что в первом случае в UL у тебя есть последний чайлд, это LI, а во втором случае в LI - последнего чайлда нет.

[Softlink]

  On 7/1/2011 at 2:08 PM, mishka said:

пробел убери! почему .class .class2 это совсем не то что .class.class2 ?

"- идиот!

- соглаааасен"

  On 7/1/2011 at 2:09 PM, psywalker said:

А потому что в первом случае в UL у тебя есть последний чайлд, это LI, а во втором случае в LI - последнего чайлда нет.

вооот, я так тоже справедливо полагал

Однако дело в пробеле. Хотя(!) для <ul> работает даже с пробелом, вот как.

[psywalker]

  On 7/1/2011 at 2:12 PM, Softlink said:

  On 7/1/2011 at 2:08 PM, mishka said:

пробел убери! почему .class .class2 это совсем не то что .class.class2 ?

"- идиот!

- соглаааасен"

  On 7/1/2011 at 2:09 PM, psywalker said:

А потому что в первом случае в UL у тебя есть последний чайлд, это LI, а во втором случае в LI - последнего чайлда нет.

вооот, я так тоже справедливо полагал

Однако дело в пробеле. Хотя(!) для <ul> работает даже с пробелом, вот как.

Ну я это и имел ввиду. Т.е. в случае с <ul> работает, потому что ты обращается к его чайлдам и они у него есть. А во втором случае ты обращаешся к чайлдам LI, но их у него - нет!

Ну да, а дело-то в пробеле, это понятно.

[mishka]

  On 7/1/2011 at 2:05 PM, Softlink said:

ul :last-child {border:0px;}

так нельзя ( вернее нужно понимать что ты делаешь и как оно работает ):

http://jsfiddle.net/aZhU6/1/

[Softlink]

  On 7/1/2011 at 2:25 PM, mishka said:

  On 7/1/2011 at 2:05 PM, Softlink said:

ul :last-child {border:0px;}

так нельзя ( вернее нужно понимать что ты делаешь и как оно работает ):

http://jsfiddle.net/aZhU6/1/

ага, я уже задавался этим вопросом. Но тут бы оно подошло, и указал только один атрибут, поэтому так и предложил.

[mishka]

  On 7/1/2011 at 2:29 PM, Softlink said:

  On 7/1/2011 at 2:25 PM, mishka said:

  On 7/1/2011 at 2:05 PM, Softlink said:

ul :last-child {border:0px;}

так нельзя ( вернее нужно понимать что ты делаешь и как оно работает ):

http://jsfiddle.net/aZhU6/1/

ага, я уже задавался этим вопросом. Но тут бы оно подошло, и указал только один атрибут, поэтому так и предложил.

зачем заранее закладывать возможность ошибки, зная что можно избежать

плюс li:first-child быстрее отработает чем просто :first-child

[Softlink]

  On 7/1/2011 at 2:34 PM, mishka said:

зачем заранее закладывать возможность ошибки, зная что можно избежать

плюс li:first-child быстрее отработает чем просто :first-child

ну это только от неопытности. Я вообще ни разу в своей практике не применял этот псевдокласс. Почитал про него, немного поигрался и все.

Теперь буду знать.

[klierik]

  On 7/1/2011 at 2:34 PM, mishka said:

зачем заранее закладывать возможность ошибки, зная что можно избежать

плюс li:first-child быстрее отработает чем просто :first-child

:first-child - браузер применит стили к первому дочернему элементу.

li:first-child - браузер применит стили к первому дочернему элементу, но перед этим проведет сравнение по имени селектора.

Как думаешь что сработает быстрее?

[mishka]

  On 7/1/2011 at 2:52 PM, klierik said:

  On 7/1/2011 at 2:34 PM, mishka said:

зачем заранее закладывать возможность ошибки, зная что можно избежать

плюс li:first-child быстрее отработает чем просто :first-child

:first-child - браузер применит стили к первому дочернему элементу.

li:first-child - браузер применит стили к первому дочернему элементу, но перед этим проведет сравнение по имени селектора.

Как думаешь что сработает быстрее?

:first-child - думаю что браузер будет искать все элементы которые подойдут к :first-child

li:first-child - думаю что браузер применит стили только к лишкам подходящим под правило :first-child

Поэтому думаю что li:first-child быстрее. Если есть линка на инфу - дай

:first-child - браузер применит стили к первому дочернему элементу.

дело в том что не к дочернему а ко всем внутренним

а самое быстрое будет

ul > :first-child думаю так

  On 7/1/2011 at 2:52 PM, klierik said:

:first-child - браузер применит стили к первому дочернему элементу.

Дело в том что не к дочернему, а ко всем внутренним

[klierik]

Разгоняем CSS-селекторы: стоит ли?

Как видно из статьи применение стилей используя селектор занимает больше времени.

Вполне логично предположить что и данный случай не исключение.

И если гнаться за скорость рендеринга страницы то

.class:first-child {}

будет работать быстрее. Особенно если класс уникален.

[mishka]

  On 7/1/2011 at 3:17 PM, klierik said:

Разгоняем CSS-селекторы: стоит ли?

Как видно из статьи применение стилей используя селектор занимает больше времени.

Вполне логично предположить что и данный случай не исключение.

И если гнаться за скорость рендеринга страницы то

.class:first-child {}

будет работать быстрее. Особенно если класс уникален.

А теперь еще раз скажи что быстрее:

ul :first-child - все элементы находящиеся в списке (не обязательно дочерние) которые являются первым элементом своего родителя (не обязательно списка)

или

ul li:first-child - все лишки находящиеся в списке которые являются первым элементом списка (может быть вложенность)

чето мне казалось что второй быстрее

[Softlink]

а даже не представляю, чем можно замерить такую скорость

[klierik]

  On 7/1/2011 at 3:22 PM, mishka said:

А теперь еще раз скажи что быстрее:

ul :first-child - все элементы находящиеся в списке (не обязательно дочерние) которые являются первым элементом своего родителя (не обязательно списка)

или

ul li:first-child - все лишки находящиеся в списке которые являются первым элементом списка (может быть вложенность)

чето мне казалось что второй быстрее

так, спорт становится слишком абстрактным.

Если разметка состоит только из UL LI, без внутреностей, то будет работать первый быстрее, а вот если положить внутрь что-то еще то дольше.

Для того что бы говорить какой из способов быстрее, следует отталкиватся от конкретного случая, так как иначе оба будем правы со своей точки зрения.

[runet]

Вставлю свои пять копеек. В MODx можно задавать свои стили или html код, так званые чанки. Данные чанки можно подключать к вызову снипетов (в том числе и к [!Wayfinder?!]) Поэтому не надо говорить что Вы не можете изменить html код меню.