Css last line selector

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all

elements:

Example

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Notice the double colon notation — ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all

elements:

Example

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if «float» is «none»)
• text-transform
• line-height
• float
• clear

Pseudo-elements and HTML Classes

Pseudo-elements can be combined with HTML classes:

Example

The example above will display the first letter of paragraphs with in red and in a larger size.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p::first-letter <
color: #ff0000;
font-size: xx-large;
>

p::first-line color: #0000ff;
font-variant: small-caps;
>

CSS — The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each element:

Example

CSS — The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each element:

Example

CSS — The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items.

The following example styles the markers of list items:

Example

CSS — The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection : color , background , cursor , and outline .

The following example makes the selected text red on a yellow background:

Example

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert something after the content of each element
::before	p::before	Insert something before the content of each element
::first-letter	p::first-letter	Selects the first letter of each element
::first-line	p::first-line	Selects the first line of each element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

Источник

Управление строками текста с помощью селектора CSS

Многочисленные доступные селекторы CSS позволяют нам легко получить доступ практически к каждому элементу HTML на любой странице. Псевдоэлемент ::first-line даже позволяет нам применять свойства CSS к первой строке текста в документе, независимо от того, переносится ли строка автоматически или вручную. К сожалению, помимо ::first-line нет селекторов для управления второй, третьей, последней или любой другой строкой. Библиотека JavaScript Lining.js здесь, чтобы прокачать ваши возможности.

.line[last] Вместо ::last-line

Похожи на селекторы ::last-child и ::nth-child() которые позволяют вам коснуться последнего или любого случайного дочернего элемента, Lining.js добавляет поведение для строк текста. Вместо использования (несуществующих) селекторов ::last-line и ::nth-line(n) в библиотеке представлены классы .line[last] и .line[index=»n»] .

После встраивания библиотеки в ваш документ начните с назначения атрибута данных data-lining для каждого текстового элемента, с которым вы хотите манипулировать Lining.js . Атрибут не ожидает никакого значения.

Затем используйте эти классы для индивидуальной разметки строк в тексте с помощью CSS.

.line[last] и .line[index=»2″] активен в тексте

В нашем примере мы окрашиваем последнюю строку

element red, while we add a bold font-weight to the second line. Although we have the regular pseudo element ::first-line в синтаксисе есть еще один Lining.js и это называется .line[first] . Это полностью зависит от вас, какой вариант вы решите использовать.

Псевдоэлементы ::nth-of-type() и ::nth-last-of-type() также см. их эквиваленты в .line:nth-of-type() и .line:nth-last-of-type() .

Чередование строк с .line:nth-of-type(2n)

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

Нельзя не упомянуть, что простой селектор .line позволяет прикреплять свойства CSS к каждой строке текста. Это предпочтительный инструмент, если вы хотите, например, нарисовать линию под каждой текстовой строкой.

Линии под каждым — ну — линия с — ну — .line

Эта разметка приводит к тому, что под каждой строкой текста рисуются синие линии. Без Lining.js мы были бы ограничены проведением линии под

element as a whole which would lead to one single line being drawn benath the paragraph.

Defining Default Behavior

As not every browser supports Lining.js может быть хорошей идеей определить различные варианты оформления текста по умолчанию. Таким образом, мы могли бы иметь текст, выглядящий по-разному с поддержкой и без нее. Lining.js .

Пример кода размечает все

elements in italic. The class nolining заботы о применении другого вида должны Lining.js не поддерживаться.

Lining.js и адаптивный макет

Lining.js творит чудеса при загрузке страницы и добавляет свои элементы в текст. Это означает, что при изменении размера окна браузера линии не будут переопределяться, а останутся в своем первоначальном виде. Если вы хотите, чтобы строки пересчитывались и располагались при каждом изменении размера окна, вы также можете добавить дополнительный атрибут данных data-auto-resize .

После Lining.js позаботится о правильном пересчете псевдоэлементов, например .line[index=»3″] .

Limit Lining.js к определенным линиям

Технически Lining.js добавляет элемент

к каждой строке текста, чтобы иметь возможность контролировать его. Во время этого процесса для длинных текстов могут наблюдаться задержки производительности. Если вы хотите манипулировать только определенными областями текста, может быть хорошей идеей явно ограничить Lining.js в эти разделы и немного ускорить процесс. Атрибуты данных data-from и data-to используются для определения этого раздела.

В примере библиотека ограничена пятой и всеми последующими строками. Селекторы теперь можно применять только к этому разделу. Остальное обрабатываться не будет.

Анимированные эффекты для появления и исчезновения линий

Использование дополнительной библиотеки по имени lining.effects.js мы можем применить несколько анимационных эффектов к нашим текстовым строкам. Эти эффекты управляются с помощью атрибута данных data-effect .

В этом примере мы идем на эффект rolling . Отдельные строки текста прокручиваются с экрана, начиная с первой строки. Всего вы можете выбрать один из семи эффектов фейдера. У нас есть простые, такие как постепенное появление или слайд-ин, но также и очень сложные, такие как metroRotateIn где линии вращаются в трехмерном пространстве при исчезновении.

Заключение

Lining.js — это очень сложный инструмент, который позволяет индивидуально оформлять текстовые строки внутри элемента абзаца. Анимационные эффекты потрясающие и добавляют к общему впечатлению. Если вы не используете атрибуты данных, вы всегда можете решить придерживаться чистого JavaScript.

Lining.js безупречно работает во всех версиях Chrome, Safari и Opera, в то время как Internet Explorer полностью не поддерживается. Библиотеку можно использовать бесплатно на условиях очень либеральной лицензии MIT. Приступить к работе довольно легко, так как имеется подробная документация и несколько хороших примеров.

Читайте также

Управление разрешениями с помощью WordPress Plugin Members 2.0 После восьми лет разработки бесплатный плагин WordPress Members недавно вышел в версии 2.0. И вполне…

Идеально отзывчивые типографские заголовки с помощью CSS и JavaScript Продвигаясь вперед со всеми своими новыми стратегиями адаптивного веб-дизайна, не забывайте об одной из самых…

Лучшее управление мультимедиа с помощью реальной медиатеки WordPress Пользователи WordPress знают об этой проблеме. Медиа-менеджер WordPress не позволяет правильно организовать файлы. Примерно из…

Роль препроцессора CSS и конвертер HTML Markdown.css Удивительные вещи происходят внутри сообщества разработчиков. Он продолжает выпускать инструменты с почасовой оплатой, при этом…

Slim CSS Framework на основе CSS Flexbox Синтаксис CSS Flexbox не так прост для понимания. Если вы не имеете дело с этим…

Источник