3

Я поставил один и тот же id для двух элементов. Почему второй окрашивается?

#red {
  color: red;
}
<span id="red"> red </span> no red <span id="red"> red </span>

1

2 ответа 2

4

В случае с CSS id ведёт себя как класс, но в JavaScript будет применяться только к первому элементу:

document.getElementById("red").style.color = "red";
<span id="red"> red </span> no red <span id="red"> red </span>

4
  • Эм.. Это ответ?
    – Qwertiy
    3 июл 2017 в 10:59
  • @Qwertiy а что такое?
    – user236939
    3 июл 2017 в 11:00
  • 2
    @Qwertiy ваш ответ, в общем-то, не шибко информативней
    – teran
    3 июл 2017 в 11:01
  • @teran, я пытался ответить на вопрос "почему". А тут я вижу только какой-то странный факт :)
    – Qwertiy
    3 июл 2017 в 11:02
3

Потому что это css. Теоретически, каждый элемент проверяется на соответствие каждому селектору. В данном случае обоим элементам селектор подошёл.

В отличие от js, где по запросу выдаётся один элемент, в css стили применяются к имеющимся элементам, а не отслеживается, к скольки элементам может быть применён этот селектор с необходимостью последующего слежения за появлением таких элементов.

Ну и да, разметка всё равно невалидна.

6
  • тут js, наверное, следует заменить на DOM.
    – teran
    3 июл 2017 в 11:43
  • @teran, не понял, как именно.
    – Qwertiy
    3 июл 2017 в 11:44
  • уникальность селектора определяется на уровне HTML DOM, а js лишь может работать с моделью документа и по сути не имеет требований к уникальности идентификаторов. То есть сам по себе js то тут ни при чем вообще. При этом уникальность нужна не во всем документе, а в ветке дерева.
    – teran
    3 июл 2017 в 11:46
  • @teran, вообще, у меня идея ответа была, что в css для каждого элемента проверяются селекторы, а в js для селектора выбираются соответствующие ему элементы. Кстати, хром мне сейчас на querySelectorAll('#red') выдал все, хотя в jQuery такое раньше точно не прокатывало...
    – Qwertiy
    3 июл 2017 в 11:48
  • да, идею я вашу понял. Просто выходит что есть HTML, который накладывает сами ограничения на уникальность и формируют документ. И есть два инструмента - css, применяющий правила визуального оформления, и js, позволяющий манипулировать структурой. Поэтому говорить о css и js, не затрагивая HTML, как-то не совсем корректно.
    – teran
    3 июл 2017 в 11:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.