Syntax

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;


text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;

Values

auto

Затрагиваемой линия выравнивается по значению text-align , если text-align не justify , и в этом случае эффект такой же , как установка text-align-last , чтобы start .

start

То же, что left если направление слева направо, и right если направление справа налево.

end

То же, что right если направление слева направо, и left если направление справа налево.

left

Содержимое строки выровнено по левому краю коробки с линиями.

right

Содержимое строки выровнено по правому краю коробки с линиями.

center

Содержимое строки находится в центре поля.

justify

Текст оправдан.Текст должен выстраиваться левым и правым краем вверх по левому и правому краю содержания параграфа.

Formal definition

Формальный синтаксис

auto | start | end | left | right | center | justify

Examples

Оправдание последней строки

CSS

p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}

Results

Specifications

Совместимость с браузерами

См.также

CSS text align last

Пример

Выравнивание последней строки текста в трех элементах <div>:

div.b {
    text-align: justify; /* For Edge */
    text-align-last: center;
}

div.c {
    text-align: justify; /* For Edge */
    text-align-last: justify;
}

Подробнее примеры ниже.

Определение и использование

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Обратите внимание, что свойство text-align-last задает выравнивание для всех последних строк в выбранном элементе. Таким образом, если у вас есть <div> с тремя абзацами в нем, text-align-last будет применяться к последней строке каждого абзаца. Чтобы использовать text-align-last только для последнего абзаца в контейнере, можно использовать: последний дочерний элемент, см. пример ниже.

Примечание: В EDGE/Internet Explorer свойство text-align-last работает только с текстом, который имеет выравнивание по тексту: выравнивание.

Поддержка браузера

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

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Примечание: В EDGE/Internet Explorer значения «Start» и «End» не поддерживаются.

Синтаксис CSS

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

Значения свойств

Другие примеры

Пример

Используйте text-align-last только на самой последней строке в контейнере:

div.b p:last-child {
    text-align-last: center;
}

Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: textAlignLast Свойство

CSS :: last-child и: first-child

предисловие

При разработке внешнего интерфейса нам иногда приходится выполнять некоторые специальные операции для настроек первого или последнего элемента. CSS предоставляет нам селекторы: last-child и: first-child по умолчанию, но при фактическом использовании мы должны обратить особое внимание на один момент.

Начните

: last-child: Определяет цвет фона элемента p, который принадлежит последнему дочернему элементу его родительского элемента. (Официальное описание от W3C）

практика

HTML:

<div>
	<h2> Это заголовок </ h2>
	 <p> Первый абзац. </ p>
	<div>
		 <p> p, второй абзац. </ p>
		 <p> p, третий абзац. </ p>
		 <р> р, четвертый абзац. </ p>
                                 <div class = "div3"> div, я последний элемент. </ div>
	</div>
	 <p> p, пятый абзац. </ p>
</div>    

CSS:

.div1{
	border: solid 1px green;
}
.div2{
	border: solid 1px orange;
}
.div3{
	border: solid 1px blue;
}
p:last-child
{
	background: pink;
}

Эффект изображения:

анализ

В .div2 последним элементом является тег div, который не выбирается: last-child. Вы можете подумать, что тег p написан в селекторе, и само собой разумеется, что элемент div не выбран.) ↗понять больше）

Если у вас есть какие-либо вопросы или идеи, пожалуйста, оставьте комментарий или отсканируйте QR-код ниже, чтобы связаться со мной ~

CSS псевдокласс :nth-last-child()

Псевдоклассы :nth-child() и :nth-of-type() выбирают заданные элементы из группы братских элементов, начиная с первого. В противоположность им, псевдоклассы :nth-last-child() и :nth-last-of-type() выбирают элементы, считая от последнего. Приведём несколько примеров. :nth-last-child(1) Выбирает последний элемент, аналогичен :last-child. :nth-last-child(2) Выбирает предпоследний

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…

ul li:nth-child(odd) { background: skyblue;}/* или */ul li:nth-child(2n+1) { background: skyblue;}

2

Источник: http://snipp.ru/html-css/nth-child

Синтаксис¶

element:nth-last-child(an + b) { /* стили */}

Источник: http://xsltdev.ru/css/nth-last-child/

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Источник: http://webref.ru/layout/structural-pseudo-classes/nth-last-child

Описание

CSS псевдокласс :last-child находит любой элемент, являющийся последним в его родителе.

Источник: http://developer.mozilla.org/ru/docs/Web/CSS/:last-child

Использование псевдокласса CSS :nth-child для выбора единственного элемента 

Задавая псевдоклассу :nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10

#selector_example li:nth-child(4){ font-size:150%; font-weight:bold; color:green;}

Источник: http://dejurka.ru/css/how-to-use-css-nth-child/

PHP-МАСТЕР.

Подробнее

Практический курс по верстке адаптивного сайта с нуля!

Подробнее

Источник: http://webformyself.com/css-psevdoklassy-stilizaciya-elementov-po-indeksam/

Значения¶

oddВсе нечётные номера элементов, начиная с конца.evenВсе чётные номера элементов, начиная с конца.<число>Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.<выражение>Задаётся в виде an±b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Результат для различных значений псевдокласса

Источник: http://xsltdev.ru/css/nth-last-child/

CSS cинтаксис:

:nth-last-child(номер) {блок объявлений;}

Источник: http://basicweb.ru/css/css_sel_nth-last-child.php

Спецификации

Источник: http://developer.mozilla.org/ru/docs/Web/CSS/:last-child

Поддержка браузерами

BCD tables only load in the browser

Источник: http://developer.mozilla.org/ru/docs/Web/CSS/:last-child

Смотрите также

• :first-child
• :nth-child
• :last-of-type

Источник: http://developer.mozilla.org/ru/docs/Web/CSS/:last-child

( 1 оценка, среднее 5 из 5 )

css — Расширенный выбор nth-child

Я пытаюсь выяснить правило выбора n-го потомка, которое выберет «остаток» от деления на три. Для объяснения здесь приведена наглядная диаграмма.

РЕДАКТИРОВАТЬ: предоставление дополнительных примеров для ясности.

div1
(should select div1)

div1     div2
(should select div1 and div2)

div1     div2     div3
(should select nothing)

div1     div2     div3    div4
(should select div4)

div1     div2     div3    div4    div5
(should select div4 and div5)

div1     div2     div3     div4     div5     div6
(should not select anything)

div1     div2     div3     div4     div5     div6     div7
(should select div7)

Др…

Я считаю, что это возможно, но не могу этого понять.

0

user3590712 10 Июл 2014 в 20:00

4 ответа

Лучший ответ

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

div:nth-child(3n):nth-last-child(-n+3) ~ div {
    /* ... */
}

http://jsfiddle.net/akzzM/

В третьем примере из 7 блоков:

• nth-child(3n) соответствует каждому третьему <div> — соответствует 3 и 6.
• nth-last-child(-n+3) соответствует последним 3 братьям и сестрам — совпадающим 5, 6 и 7.
• Вместе они будут соответствовать только последнему интервалу из 3 — совпадающему 6.

Тогда ~ div соответствует любым братьям и сестрам, которые следуют за (7).

Чтобы сопоставить 1-й и 2-й, когда нет 3-го, вы также можете сопоставить :first-child, если он один из последних 2, и :last-child, если он один из первых 2:

div:nth-child(3n):nth-last-child(-n+3) ~ div,
div:first-child:nth-last-child(-n+2),
div:last-child:nth-child(-n+2) {
    /* ... */
}

http://jsfiddle.net/JEST3/

3

Jonathan Lonowski 10 Июл 2014 в 18:13

Насколько я могу судить, не существует единого селектора, который позволил бы вам это сделать.

Однако комбинация nth-last-child и переопределения с nth-child приведет вас к этому.

CSS

li:nth-last-child(-n+2) {color:red;}

li:nth-child(3n) {color:black;}

li:nth-child(1),
li:nth-child(2),
li:nth-child(3) {color:black;}

Демонстрация Jsfiddle

1

Paulie_D 10 Июл 2014 в 16:22

Это может быть решением вашей проблемы:

div:not(:nth-child(3n)):not(:nth-child(1)):not(:nth-child(2)) {
    background-color: #38f;
}

0

Barun 10 Июл 2014 в 16:13

Я считаю, что решил это к своему удовлетворению, несмотря на то, что мне пришлось написать две разные группы css. Хитрость в том, что вы можете использовать несколько селекторов в одной строке, что эквивалентно объединению выбранных элементов.

Рабочий пример на http://jsfiddle.net/MY4cD/

Более полное решение (которое можно расширить до других кратных, кроме трех), приведено ниже.

Учитывая следующий HTML (и для любого количества)

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

Следующий CSS создаст строки из трех с «остальными» блоками, выделенными красным.

    .cell {
        width: 33.33%;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(1){
        background:red;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+1):nth-last-child(2){
        background:red;
    }

    .cell:nth-last-child(-n+2):nth-child(3n+2):nth-last-child(1){
        background:red;
    }

Если вы хотите, чтобы в каждой строке было 4 блока, и снова выберите оставшуюся часть, вы можете использовать следующий CSS

    .cell {
        width: 25%;
    }

    /* accounts for when there is 1 remainder */
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(1){
        background:red;
    }

    /* accounts for the first of 2 remainders */         
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(2){
        background:red;
    }

    /* accounts for the second of 2 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(1){
        background:red;
    }

    /* accounts for the first of 3 remaidners */
    .cell:nth-last-child(-n+3):nth-child(4n+1):nth-last-child(3){
        background:red;
    }

    /* accounts for the second of 3 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+2):nth-last-child(2){
        background:red;
    }

    /* accounts for the third of 3 remainders */
    .cell:nth-last-child(-n+3):nth-child(4n+3):nth-last-child(1){
        background:red;
    }

Таким образом, вы можете видеть, что чем выше вы поднимаетесь, тем сложнее будет узор, но это, безусловно, возможно для любого числа.

Я использовал этот шаблон вместе с медиа-запросами для имитации эффектов нового CSS flex-flow: row wrap; команда с использованием чисел с плавающей запятой для кроссбраузерности. Вы можете увидеть полную демонстрацию этого здесь: http://codepen.io/msorrentino/full/chHnu/

0

user3590712user3590712 11 Июл 2014 в 13:55

CSS: селектор nth-last-of-type ()

Пример

Укажите цвет фона для каждого элемента

, который является вторым элементом p. своего родителя, считая от последнего ребенка:

p: nth-последний-тип (2) {
фон: красный;
}

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Селектор : nth-last-of-type ( n ) соответствует каждому элементу, который является n -м дочерним элементом определенного типа его родитель, считая от последнего ребенка.

n может быть числом, ключевым словом или формулой.

Совет: Посмотрите на селектор: nth-last-child () для выбора элемента, который является n -м потомком, независимо от тип своего родителя, считая от последнего дочернего элемента.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.

Синтаксис CSS

Другие примеры

Пример

Четные и нечетные ключевые слова, которые могут использоваться для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).

Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:

p: nth-last-of-type (четный) {
фон: синий;
}

Пример

По формуле ( и + b ).Описание: a представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.

Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:

p: n-й-последний-тип (3n + 0) {
фон: красный;
}

: последняя машина | CSS-уловки

Селектор : last-of-type позволяет выбрать последнее вхождение элемента в его контейнере.Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.

Допустим, у нас есть статья с заголовком, несколькими абзацами и изображением:

  <статья>
   
 Заголовок 
 
  
 Пункт 1. 
  
 Пункт 2 
  
 Пункт 3