background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-ms-radial-gradient
background-position-x
background-position-y
---------------
filter
hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила
@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации
A
#id
.class
.class1.class2
*
A B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы
::after (:after)
::before (:before)
::first-letter
::first-line
::selection
---------------
Функции
attr()
calc()
---------------
Значения свойств
Строки
Числа
Проценты
Размер
Адрес
Цвет
Угол
Медиа-запросы
inherit
initial
Видео уроки
- 20 апрель 2019, 18:00
Популярные статьи
- 23 апрель 2019, 21:02
Наш опрос
| Помогли мы вам |
Наши новости
РЕКЛАМА
ВАША РЕКЛАМА
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
элемент:nth-last-child(odd | even | <число> | <выражение>) {...}
Значения
- odd
- Все нечетные номера элементов.
- even
- Все четные номера элементов.
- число
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
- выражение
- Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | Последний элемент, является синонимом псевдокласса :last-child. |
| 5 | 5 | Пятый элемент с конца. |
| 2n | 2, 4, 6, 8, 10 | Все четные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечетные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все четные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечетные элементы. |
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-child</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные границы */
border-spacing: 0; /* Расстояние между ячейками */
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 3px; /* Поля в ячейках */
border-left: 3px double #333; /* Граница слева */
}
td:nth-last-child(2n+1) {
background: #f0f0f0; /* Цвет фона */
}
td:nth-child(1) {
border: 1px solid #333; /* Параметры рамки */
background: #cfc; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<td> </td><td>2134</td><td>2135</td>
<td>2136</td><td>2137</td><td>2138</td>
</tr>
<tr>
<td>Нефть</td><td>16</td><td>34</td>
<td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>4</td><td>69</td>
<td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>7</td><td>73</td>
<td>79</td><td>34</td><td>86</td>
</tr>
<tr>
<td>Камни</td><td>23</td><td>34</td>
<td>88</td><td>53</td><td>103</td>
</tr>
</table>
</body>
</html>В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
Еще новости по теме:
Другие новости по теме:
|
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
23-04-2019, 21:02
Представлен «100-Мп» Lenovo Z6 Pro с 4 тыльными камерами - «Новости сети»
Как и ожидалось, Lenovo на особом мероприятии в Китае представила новый флагман Z6 Pro. Этот второй телефон компании на базе 7-нм однокристальной системы Qualcomm Snapdragon 855 был представлен всего
23-04-2019, 21:01
Huawei рассказала о планах относительно 5G и подтвердила выход Mate X в июне - «Новости сети»
На международной конференции, проведённой Huawei для аналитиков, китайский гигант объявил о своих планах по выпуску устройств с поддержкой 5G. Согласно ним, Huawei Mate X — первый изгибаемый смартфон
23-04-2019, 21:01
У Apple потребовали $1 млрд из-за ошибочного ареста по вине системы распознавания лиц - «Новости сети»
18-летний юноша из Нью-Йорка подал иск против Apple на $1 млрд из-за противоправного ареста, который, по его словам, произошёл из-за системы распознавания лиц Apple. Информация размещенная на
23-04-2019, 21:01
Видео: Tesla показала способность Model 3 к автономному вождению - «Новости сети»
Tesla делает большую ставку на внедрение систем автономного вождения, пообещав, что через два года в её портфолио появятся модели без рулевого колеса. В новом видеоролике компания
23-04-2019, 21:01
OPPO выпустит смартфон среднего уровня A9 с 48-Мп камерой - «Новости сети»
Сетевые источники сообщают о том, что китайская компания OPPO в ближайшее время анонсирует смартфон среднего уровня под обозначением A9. Рендеры говорят о том, что новинка оснащена дисплеем с
23-04-2019, 21:01
Все характеристики Moto Z4: Snapdragon 675, 48-Мп задняя, 25-Мп лицевая камеры и прочее - «Новости сети»
Motorola готовит следующий аппарат в семействе Z — Moto Z4. Решение станет преемником Moto Z3 на базе Qualcomm Snapdragon 835 и уже не раз попадалось в фокус внимания журналистов. Недавняя индийская
23-04-2019, 21:01
Официальный анонс Intel Coffee Lake-H Refresh: до восьми ядер с частотой до 5 ГГц в ноутбуках - «Новости сети»
После череды слухов и утечек компания Intel наконец официально представила новое, девятое поколение производительных мобильных процессоров, которое называется Coffee Lake-H Refresh. Новое семейство
23-04-2019, 21:01
Число наземных станций ГЛОНАСС в России и за рубежом удвоится - «Новости сети»
Общее количество навигационных наземных станций системы ГЛОНАСС после 2020 года увеличится более чем в два раза. Об этом, как сообщает ТАСС, говорится в презентации, показанной первым заместителем
23-04-2019, 21:01
Производственная деятельность Rambus продолжает приносить убытки - «Новости сети»
Три с половиной года назад «самая юридическая компания Кремниевой долины», как за глаза называют Rambus, решила поработать над новым имиджем. Примерно тогда у компании сменился директор, который
23-04-2019, 21:01
В оснащение платы Biostar A68N-5600E вошёл гибридный процессор AMD A4 - «Новости сети»
Компания Biostar анонсировала материнскую плату A68N-5600E, призванную стать основой компактного и относительно недорогого компьютера на аппаратной платформе AMD. Новинка соответствует формату Mini
23-04-2019, 21:00
Силой мысли: начат выпуск российской коммуникационной системы «НейроЧат» - «Новости сети»
Начато серийное производство российского прибора для общения «НейроЧат». Об этом, как сообщает сетевое издание «РИА Новости», рассказала генеральный директор и лидер проекта Наталья Галкина.
23-04-2019, 21:00
NVIDIA официально представила видеокарту GeForce GTX 1650 за $149 - «Новости сети»
NVIDIA GTX 1650 — первая видеокарта на основе Turing, которая стоит менее 200 долларов. Это преемник GTX 1050 с 12-нм графическим процессором TU117 и 896 ядрами CUDA, 4 Гбайт памяти GDDR5 и
22-04-2019, 00:00
Заработок В Интернете 500 Рублей В ЧАС. Новинка Grizzlyforexreturn ПЛАТИТ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
20-04-2019, 18:00
Изометрия в Adobe Illustrator (isometry in Illustrator) - «Видео уроки - CSS»
#vector #art #illustrator... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не
19-04-2019, 15:00
В ПЛЮСЕ НА ARBI FINANCE. НОВОСТИ. ДОБАВЛЕН ЗАРАБОТОК БЕЗ ВЛОЖЕНИЙ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
19-04-2019, 15:00
ASTELAS - ТОП НОВИНКА. 120% БЫСТРЫЙ И ПРОСТОЙ ЗАРАБОТОК. ОБЗОР И ТЕСТ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
19-04-2019, 15:00
ЗАРАБОТОК 2000 РУБЛЕЙ В ДЕНЬ. ASTELAS ПЛАТИТ МОМЕНТАЛЬНО / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
19-04-2019, 06:00
Система управления современной АЭС - «Видео уроки - CSS»
#loftblog #loftblogDevShow #вебпрограммист... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
18-04-2019, 12:00
? NEWS ! УСКОРИТЕЛЬ ЗАРАБОТКА В ПРОЕКТЕ SPACE IS MINE. ТЕСТИМ И ВЫВОДИМ ДЕНЬГИ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
18-04-2019, 06:00
NGINX: рожден для производительности и масштабирования - «Видео уроки - CSS»
#loftblog #loftblogDevShow #вебпрограммист... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
15-04-2019, 18:00
УНИКАЛЬНЫЙ. БЫСТРЫЙ ЗАРАБОТОК В ПРОЕКТЕ IQFUTURE. ОБЗОР / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
15-04-2019, 18:00
ПОЧАСОВИК IQFUTURE ПЛАТИТ. ВЫВОДИМ ДЕНЬГИ. ЗАРАБОТОК КАЖДЫЙ ЧАС / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
#заработок #заработоквинтернете #заработоконлайн... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не
15-04-2019, 00:00
Три большие лжи о JavaScript — Суровый веб #199 - «Видео уроки - CSS»
#js #jаvascript #frontend... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не
14-04-2019, 00:00
Google Currents, Новый Edge на Chromium, Прослушка голосового помощника - «Видео уроки - CSS»
#loftblog #LoftNews #вебпрограммист... Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда
| ! | |||
| B | border-left-color | border-top | |
| C | column-count | columns
|
counter-reset
|
| D | E
|
H
|
Q
|
| F
|
L
|
M
|
O |
| P
|
W
|
T
|
text-shadow |
| R | U
|
V | Z
|
Вендорные свойства
Эти свойства работают только в определённых браузерах.
Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit- для Chrome и Safari, -o- для Opera.
| Firefox | Opera | Safari и Chrome | |
| -moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
| @-правила | |||
| @font-face | @media |
| Селекторы и их комбинации | |||
| A
|
A B
|
[attr]
|
[attr~='value']
|
| Псевдоклассы | |||
| :active
|
:enabled
|
:hover | :not
|
| :only-child
|
:read-only | :target
|
Если вы вдруг случайно заметили, что одна из ссылок ведет не на ту страницу будьте так любезны сообщить нам - Обратная связь ....
Спасибо огромное..
Значение initial применяется для установки исходного значения свойства. Может пригодиться в нескольких случаях, к примеру, восстановить значения свойств, заданных браузером по умолчанию или задать начальное значение свойства, измененное в результате наследования. Ключевое...
Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено....
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных...
Задаёт угол наклона. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки....
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами....
Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках....
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера....
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна....
Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5)....
Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш....
Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно...
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета....
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." Copyright © 2006 Все для веб-дизайнера - CSS. |
|