Чем отличаются псевдоклассы с разным двоеточием?

Question

[Senseich]

Все привет! Никогда не обращал на это внимание, но сегодня увидел в чужой верстке, и появилось пару вопросов:

Например:

input::-moz-placeholder {text-overflow:ellipsis;} 
input:-moz-placeholder {text-overflow:ellipsis;}

1) Чем отличаются такие записи, с одним двоеточием и с двумя?

2) И второй вопрос, что означает запись без указания элемента (т.е. просто, псевдокласс и свойства)

Например:

:focus {outline: 0;}

::-webkit-input-placeholder {
    color: #3d3d3d;
}

Относительно второго вопроса, я как бы подозреваю, что это имеется ввиду для всех элементов, но если я не ошибаюсь, для этого используется символ звездочка * ?

Answer 1

[Ivan Bogachev]

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

• для псевдо-элементов - двойное двоеточие "::"
  
• для псевдо-классов - одинарное двоеточие ":"
  

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

Comments

[Senseich]

Ivan Bogachev, зачем тогда писать оба варианта, если можно написать с одним двоеточием, и как я понял будет везде работать? Я этот пример собственно вот от сюда взял: html5.by/blog/placeholder

И что скажете по второму вопросу? )

[Ivan Bogachev]

Senseich,

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

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

И что скажете по второму вопросу?

В данной ситуации звездочку можно опустить. Тут как бы и добавить нечего.

[Евгений]

Senseich, по второму вопросу приведу аналогию: когда ты составляешь селектор для всех элементов имеющих класс foo, ты же напишешь .foo а не *.foo, вот с этим то же самое

[Senseich]

Евгений, т.е. это как обычные классы, только псевдо? )

[Евгений]

Senseich, псевдо-классы - не то же самое, что классы, но по части составления селекторов, да, это как обычные классы, только псевдо

[Senseich]

Евгений, да, я это и хотел сказать

Answer 2

[Степан Крапивин]

С двумя двоеточиями это по стандарту CSS3, с одним двоеточием более старые стандарты

Answer 3

[A K]

Разная спецификация CSS.
В CSS3 используется одинарное двоеточие, как и двойное, но IE8 поддерживает одно двоеточие. Поэтому лучше использовать одно двоеточие.

Comments

[Senseich]

А что скажете по второму вопросу? Я правильно мыслил, это для всех элементов?

[A K]

Senseich, в этом случае звездочку можно просто опустить. *::-webkit-input-placeholder → ::-webkit-input-placeholder