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.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, css, javascript, php, jquery




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Число 6
Добавление описания к перечислениям (Enumerations) C#
Урок 11. Перегрузка реляционного оператора C#