Как оформить разные элементы списка в CSS?

Andrey A
  · 249

<ol class="rounded">

<li><a href="#">Элемент списка</a></li> (цвет красный должен быть у этой строки остальные строки в черном цвете) Как сделать в CSS ?

<li><a href="#">Элемент списка</a></li>

<li><a href="#">Элемент списка</a></li>

<li><a href="#">Элемент списка</a></li>

<li><a href="#">Элемент списка</a></li>

</ol>

rounded {

counter-reset: li;

list-style: none;

font: 14px "Trebuchet MS", "Lucida Sans";

padding: 0;

text-shadow: 0 1px 0 rgba(255,255,255,.5);

}

.rounded a {

position: relative;

display: block;

padding: .4em .4em .4em 2em;

margin: .5em 0;

background: #DAD2CA;

color: #444;

text-decoration: none;

border-radius: .3em;

transition: .3s ease-out;

}

.rounded a:hover {background: #E9E4E0;}

.rounded a:hover:before {transform: rotate(360deg);}

.rounded a:before {

content: counter(li);

counter-increment: li;

position: absolute;

left: -1.3em;

top: 50%;

margin-top: -1.3em;

background: #8FD4C1;

height: 2em;

width: 2em;

line-height: 2em;

border: .3em solid white;

text-align: center;

font-weight: bold;

border-radius: 2em;

transition: all .3s ease-out;

}

Партнёрские программы, инструменты для вебмастера, рейтинг хостингов  · siterost.net
Отвечает
Вадим

Чтобы выбрать конкретный элемент списка и задать ему свои стили вы можете воспользоваться одним из следующих способов:

  1. Если нужен именно первый элемент, используйте псевдо-селектор :first-child Пример:

li {

color: black;

}

li:first-child {

color: red;

}

Есть также и другие псевдо-селекторы: :last-child (для выбора последнего элемента) и :nth-child(n) (для выбора элемента, находящегося на определенной позиции, например, nth-child(3) - выбирает 3 по счету элемент)

  1. Если цвет не должен зависеть от положения элемента, логично было бы добавить ему какой-то класс и задать цвет элементам этого класса. Пример:

li {

color: black;

}

li.special {

color: red;

}

PS: Я предположил, что под словом цвет подразумевается цвет шрифта (свойство color). Если же в виду имелся цвет заливки, то нужно менять свойство background-color.

8 мая  · 329
Комментировать ответ…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями
Войти и ответить на вопрос
Читайте также

Как установить гиперссылку в HTML?

Frontend-разработчик, создатель учебного портала Frontend Blok и сервиса Frontend Help и...  · tele.click/tpverstak

Для гиперссылок необходимо использовать тег <a>

Обычно ссылка выглядит следующим образом:

<a href="https://example.com">Ссылка</a>

Вместо https://example.com необходимо записать ссылку, на которую хотите установить переадресацию.

Если необходимо открыть ссылку в следующей вкладке, то необходимо дописать аттрибут target="_blank".

В итоге будет следующая запись:

<a href="https://example.com" target="_blank">Ссылка</a>

5 июля 2018  · 61,1 K
Прочитать ещё 2 ответа

Как сделать ссылку на вторую страницу внутри сайта в html?

Чтобы сделать ссылку на новую страницу сайта, нужно вписать ссылку в <a>.

Например: <a href="site.ru/raspisanie">Расписание</a>

Также можете указать дополнительные атрибут target="new" - чтобы ссылка открывалась в новом окне.

Чтобы сделать сделать ссылкой картинку используйте <a href="site.ru/raspisanie"><img="путь к картинке"></a>

Будут вопрос - пишите!

7 января  · 27,7 K
Прочитать ещё 2 ответа

Как выровнять элемент по центру CSS?

Молодой человек 20 лет. Увлекаюсь разными компьютерными штуками и занимаюсь пауэ...

Если вы имеете ввиду выравнивание по центру по горизонтали, вам достаточно применить для нужного блока свойство автоотступа: margin: "0 auto;", после чего блок переместится в центр.

19 июля 2018  · 30,0 K
Прочитать ещё 3 ответа

Как оформить сайт с точки зрения SEO?

Антон Величко
Эксперт
811
SEO аналитик. Нравится помогать - это развивает меня самого! antonvelichko.ru  · antonvelichko.ru

Насчет оформления - не подскажу, т.к. это больше к дизайнеру.

Но любой сайт должен иметь структуру, согласоно собранному Семантическому ядру на момент создания сайта. Это позволит сделать его более понятным для пользователя (согласно его потребностям) и проще продвигать условно бесплатным методом - SEO.

Каждый сайт, если планируется продвижение в поисковых системах, должен иметь базовую техническую оптимизацию.

Некоторые пункты:

  • наличие мета-тегов title/Description, с заданными заблонами автогенерации (если необходимо);
  • автогенерируемой картой сайта Sitemap, содержащей URL, отдающие 200ОК;
  • правильно составленный файл Robots.txt;
  • тег canonical;
  • и т.д.
24 апреля 2019  · 7,0 K
Прочитать ещё 10 ответов

Как вставить картинку в html в блокноте?

Ролевик, инженер, турист, анимешник и просто хороший человек.

Использовать команду <img src="...">

Без атрибутов это будет выглядеть как <img src="uzeron_pc.jpg">

Советую прочитать про атрибуты. Они помогут правильно разместить картинку на странице. Например

<img src="img/uzeron_pc.jpg" align="left" vspace="10" border="3" alt="Сайт для сайтостроителей uzeron.com">

Означает что текст будет обтекать справа, отступ по ширине 10 пикселей, название картинки "Сайт для сайтостроителей uzeron.com"

Если конечно у вас будет присутствовать текст.

7 июня 2018  · 44,8 K
Прочитать ещё 3 ответа