Стили только на главной странице

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

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

<divid="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.