CSS, выберите if: first-child имеет класс = "selected"

У меня есть два <a> в <p>, и я хочу назначить им разные границы при выборе.CSS, выберите if: first-child имеет класс = "selected"

Когда пользователь нажимает на <a> в JavaScript задает класс "selected" и граница обратится к зеленому, если это первый <a>, но если второй <a> щелкает и присвоен класс = «выбрано» граница должна обратиться к красный.

То, что я хотел бы сделать в CSS что-то вроде:

a:first-child.selected {border-color:green} 
a.selected {border-color:red}

Но это не работает.

Существует множество примеров, в которых описано, как выбрать первый ребенок определенного класса, но ни один из них не описывает, как выбрать первый ребенок определенного тега, если он имеет определенный класс.

Этого можно достичь вообще?

Теперь я установил первый <a> как class="yesselected", и если второй щелкнул, он будет иметь class="noselected".

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

источник

2013-11-21 Fredrik D

Посмотрите на [селектор CSS3: первый тип с именем класса?] (Http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name) –

Итак, это * необходимо * работа. Является ли 'a' * действительно *': first-child' или просто 'a: first-of-type()' Можете ли вы показать свой HTML? И JavaScript, который добавляет/меняет имена классов? Кроме того, [он работает в этой (простой) демонстрации] (http://jsfiddle.net/davidThomas/DDtuZ/). –

Я обновил свой вопрос sice все теги были утеряны. –

Первоначально я думал, ваш CSS был немного выключен, вам необходимо элемент псевдо в конец. Это кажется неправильным в случае псевдоклассов. Благодаря @ BoltClock единорог

a.selected:first-child {border-color:green} 
a.selected {border-color:red}

Однако я должен спросить, если ваш CSS устанавливает границу появляться где-то еще со всеми деклараций, необходимых значений границы?

a{border: 1px solid transparent;} 
a.selected:first-child {border-color:green} 
a.selected {border-color:red}

http://jsfiddle.net/8hPw8/

источник

2013-11-21 16:47:01 DrCord

Это не псевдоэлемент - это псевдокласс, поэтому неважно, ставите ли вы его до или после селектора классов. – BoltClock

действительно? это интересно, а не то, как я понял спецификацию. – DrCord

Yup. В нем говорится [здесь] (http://www.w3.org/TR/selectors/#first-child-pseudo), что это псевдокласс. Псевдо-класс и псевдоэлемент при одинаковом названии - это не одно и то же - см. [Этот вопрос] (http://stackoverflow.com/questions/8069973/what-is-the-difference-between-a-pseudo- класс-а-а-псевдо-элемент-в-CSS). – BoltClock

это не должно быть a.selected: первого ребенка ?

Редактировать: Болтбол прав, заказ не имеет значения.

Это зависит от точного поведения селектора :first-child.

a:first-child

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

источник

2013-11-21 16:47:29 tewathia

Это не имеет значения. – BoltClock

CSS, выберите if: first-child имеет класс = "selected"

ответ

Смежные вопросы