Ещё четыре способа скрыть и показать элементы при помощи html и css

Способ #6. display

, вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.

See the Pen hide with display: none by SitePoint (@SitePoint) on CodePen.

Однако в большинстве случаев — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа () или если не используется новое свойство contain.

Кроме того, свойство display может принимать множество значений (, , , , , …). Если вы сбрасываете его до значения , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

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

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

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

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

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

• Родительский div очерчен черной рамкой и занимает всю доступную ширину;
• span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
• Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Absolute position

The property allows an element to be moved from its default position within the page layout using , , , and . An —positioned element can therefore be moved off-screen with or similar:

See the Pen
hide with position: absolute by SitePoint (@SitePoint)
on CodePen.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Свойство overflow

Свойство  позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – , что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить . Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

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

Удалите часть содержимого из поля ниже

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

В приведённом выше примере нам нужно прокручивать содержимое только по оси , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство (en-US), которое позволяет прокручивать содержимое только по оси .

Вы также можете установить прокрутку по оси x с помощью (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства или . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со , вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство , передав два значения. Первое значение будет относиться к , а второе — к . Если передать одно значение, то и получат одинаковые значения. Например, устанавливает в и в .

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте . Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

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

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

Отображается на дополнительной небольшой
Очень маленькие

Видно на маленьких или узких
Маленький или узкий

Отображается на средний или узкий
Средний или узкий

Видимый на большие или узкие
Большие или узкие

Видно на маленьких или шире
Небольшой или шире

Отображается на средних или широких
Средний или шире

Видимый на большие или шире
Большие или широкие

Видны на очень большой
Очень большая

Ваши просмотра именно сверхмалые
Вашего просмотра точно не очень маленькая

Ваши просмотра именно небольшой
Вашего просмотра точно не маленький

Ваши просмотра именно средний
Вашего просмотра точно не средний

Ваши просмотра именно большие
Вашего просмотра точно не большие

Ваши просмотра точно очень большая
Вашего просмотра точно не очень большой

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

Toggle

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

Дочерние элементы будут отображаться, когда на родительский элемент имеется наведение или фокус. Добавьте к родительскому элементу, чтобы он мог получать фокус с помощью клавиатуры и сенсорных устройств.

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

Душа моя озарена неземной радостью, как эти чудесные утра.
Душа моя озарена неземной радостью, как эти чудесные утра.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

Способ #4. clip-path

Свойство определяет область обрезки — часть блока, которая будет видима на странице. Если эта область занимает 0 пикселей, элемент будет скрыт: .

See the Pen hide with clip-path by SitePoint (@SitePoint) on CodePen.

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

Скрытие содержимого с помощью content-visibility: hidden #

Что делать, если вы хотите, чтобы контент не отображался независимо от того, отображается он на экране или нет, используя при этом преимущества кэшированного состояния визуализации? Введите: .

Это свойство дает вам все те же преимущества необработанного содержимого и кэшированного состояния визуализации, что и за пределами экрана. Однако, в отличие от with , он не начинает автоматически отображаться на экране.

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

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

• : скрывает элемент и разрушает его состояние рендеринга. Это означает, что отображение элемента так же дорого, как отображение нового элемента с тем же содержимым.
• : скрывает элемент и сохраняет его состояние отрисовки. На самом деле это не удаляет элемент из документа, поскольку он (и его поддерево) по-прежнему занимает геометрическое пространство на странице, и на него все еще можно щелкнуть. Он также обновляет состояние рендеринга в любое время, когда это необходимо, даже когда оно скрыто.

, с другой стороны, скрывает элемент, сохраняя его состояние визуализации, поэтому, если есть какие-либо изменения, которые должны произойти, они произойдут только тогда, когда элемент будет показан снова (то есть свойство удаляется).

Некоторые отличные варианты использования – это реализация расширенных виртуальных скроллеров и макет измерения.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);
  if (x.style.visibility === ‘hidden’) {    x.style.visibility = ‘visible’;  } else {    x.style.visibility = ‘hidden’;
  }}

Hide and show an <img> element:

function hideElem() {  document.getElementById(«myImg»).style.visibility = «hidden»;
}function showElem() {  document.getElementById(«myImg»).style.visibility = «visible»;
}

Оформление списков в CSS

Для оформления списков используются следующие свойства:

list-style-type

Возможные значения:

• (отмена маркера или нумерации)

Пример:

ul.none{
	list-style-type none;
}
ul.disc{
	list-style-type disc;
}
...
ol.decimal{
	list-style-type decimal;
}
ol.decimal-leading-zero{
	list-style-type decimal-leading-zero;
}

Результат:

• none
• none

• disc
• disc

• circle
• circle

• square
• square

1. decimal
2. decimal

1. decimal-leading-zero
2. decimal-leading-zero

1. armenian
2. armenian

1. georgian
2. georgian

1. lower-alpha
2. lower-alpha

1. upper-alpha
2. upper-alpha

1. lower-greek
2. lower-greek

1. lower-latin
2. lower-latin

1. upper-latin
2. upper-latin

1. lower-roman
2. lower-roman

1. upper-roman
2. upper-roman

list-style-image

Возможные значения:

url(‘путь к файлу’) (установка своего изображения)

Пример:

ul{
  list-style-imageurl('1.png');
}

Результат:

1. пункт 1
2. пункт 1

list-style-position (положение маркера или номера)

Возможные значения:

• (Маркер является частью текстового блока и отображается в элементе списка)
• (Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока)

Пример:

ul.inside{
  list-style-positioninside;
}
ul.outside{
  list-style-positionoutside;
}

Результат:

inside:

• пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
• пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

outside:

• пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
• пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

Задание: Создать маркированный список, вместо маркеров установить изображение.

Примерный результат:

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);
  if (x.style.visibility === ‘hidden’) {    x.style.visibility = ‘visible’;  } else {    x.style.visibility = ‘hidden’;
  }}

Hide and show an <img> element:

function hideElem() {  document.getElementById(«myImg»).style.visibility = «hidden»;
}function showElem() {  document.getElementById(«myImg»).style.visibility = «visible»;
}

CSS сдерживание #

Ключевой и всеобъемлющей целью сдерживания CSS является обеспечение повышения производительности рендеринга веб-контента путем обеспечения предсказуемой изоляции поддерева DOM от остальной части страницы.

По сути, разработчик может сообщить браузеру, какие части страницы инкапсулированы как набор контента, позволяя браузерам рассуждать о контенте без необходимости учитывать состояние вне поддерева. Знание того, какие части контента (поддеревья) содержат изолированное содержимое, означает, что браузер может принимать решения по оптимизации рендеринга страницы.

Существует четыре типа содержания CSS , каждый из которых является потенциальным значением свойства CSS, которые можно объединить в список значений, разделенных пробелами:

• : Ограничение размера на элементе гарантирует, что блок элемента может быть размещен без необходимости изучения его потомков. Это означает, что мы потенциально можем пропустить макет потомков, если все, что нам нужно, – это размер элемента.
• : Включение макета означает, что потомки не влияют на внешний макет других блоков на странице. Это позволяет нам потенциально пропускать компоновку потомков, если все, что мы хотим сделать, это расположить другие блоки.
• : Включение стиля гарантирует, что свойства, которые могут влиять не только на его потомков, не покидают элемент (например, счетчики). Это позволяет нам потенциально пропустить вычисление стилей для потомков, если все, что нам нужно, – это вычислить стили для других элементов.
• : Покраска гарантирует, что потомки содержащего бокса не будут отображаться за его пределами. Ничто не может явно переполнить элемент, и если элемент находится за пределами экрана или по иным причинам не виден, его потомки также не будут видны. Это позволяет нам потенциально пропустить рисование потомков, если элемент находится за кадром.

Visible

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

На примере ниже выводится , в котором находится текст. У этого div указана высота и сделана синяя рамка, чтобы были видны границы. И хорошо видно, что хотя сам блок заканчивается нижней рамкой, текст идет ниже и выходит за его пределы. Все потому, что по умолчанию видимость при переполнении установлена в – видима.

See the Pen
overflow visible by Андрей (@adlibi)
on CodePen.

Еще интересный момент в том, что даже если контент виден за пределами блока, это вылезающее содержимое не влияет на поток страницы. Например, под блоком с синей рамкой выведен блок с красной рамкой и прозрачным красным фоном. Видно, что текст за пределами первого контейнера не мешает второму контейнеру и тот примыкает вплотную к первому.

See the Pen
overflow flow by Андрей (@adlibi)
on CodePen.

Говоря в целом: не стоит без особой причины устанавливать фиксированную высоту элементов.

opacity and filter: opacity()

The and properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

See the Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.

There’s little practical difference between the two in modern browsers, although should be used if multiple effects are applied at the same time (blur, contrast, grayscale etc.)

Opacity can be animated and offers great performance, but be wary that a fully transparent element remains on the page and can trigger events.

WebKit

WebKit extensions related to scroll-bar customization are:

These can each be combined with additional pseudo-selectors:

• – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
• – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
• – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
• – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
• – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
• – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
• – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
• – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
• – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
• – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
• – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

Examples of these combinations

Styling Scrollbars — Webkit.org