CSS только для главной страницы

Иногда требуется применять стили к элементу (элементам) только на главной странице. Эту задачу нельзя решить с помощью чистого CSS – просто не существует возможности. Но можно задействовать PHP или JS (jQuery). Давайте разберемся, как это сделать.

Предположим, что есть у нас элемент:

<div id="up">upread.ru</div>

И вот хотим мы, чтобы буквы в этом диве были зеленого цвета, но только на главной странице. Как это сделать?

Решение с помощью PHP

Вставьте где-нибудь на странице этот код, в футере, хедере или где-нибудь еще:

<?php
if (($_SERVER['REQUEST_URI']=="/") || ($_SERVER['REQUEST_URI']=="/index.php ")) {
print <<<HERE
<stye>
#up {
Color:green;
}
</style>
HERE;
?>

Пояснение: мы определяем адрес страницы, и если он совпадает с адресом главной, то прописываем стили для элемента с помощью PHP.

Решение с помощью JavaScript

Аналогично где-нибудь в шаблоне, но обязательно после вывода элемента вставьте этот код:

<script>
var asd = window.location.href;
if ((asd=="https://ваш-сайт.ru /") || (asd=="https://ваш-сайт.ru /index.php")) {
document.getElementById("up").style.color = "green";
}
</script>

Также можно использовать и jQuery:

jQuery("#up").css('color', 'green');

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