diff --git a/css/any-link/demos/basic/index.html b/css/any-link/demos/basic/index.html new file mode 100644 index 0000000000..2f216460cc --- /dev/null +++ b/css/any-link/demos/basic/index.html @@ -0,0 +1,64 @@ + + + + :any-link — Псевдокласс — Дока + + + + + + + + + +
+

:any-link

+

Стилизуем любые ссылки одним селектором: и непосещённые, и посещённые. Некликабельные <a> без href сюда не попадают.

+ +
+
+
Внутренняя ссылка: прыгнуть к демо
+
Внешняя ссылка: doka.guide
+
Якорь без href (не ссылка): просто текст
+
+
+
+ + + + diff --git a/css/any-link/index.md b/css/any-link/index.md new file mode 100644 index 0000000000..49ec5913bd --- /dev/null +++ b/css/any-link/index.md @@ -0,0 +1,57 @@ +--- +title: "`:any-link`" +description: "Выбирает любые ссылки — посещённые и непосещённые (`` и `` с `href`). Удобно стилизовать все ссылки одним селектором." +authors: + - drakesbot12 +keywords: + - any-link + - ссылка + - селектор + - link + - visited +related: + - html/a + - css/visited + - css/link +tags: + - doka +--- + +## Кратко + +`:any-link` — псевдокласс, который совпадает со всеми «кликабельными» ссылками: и непосещёнными (`:link`), и посещёнными (`:visited`). Работает с элементами [``](/html/a/) и ``, если у них есть атрибут `href`. + +## Пример + +Стилизуем все ссылки одним селектором. Некликабельные `` без `href` при этом не попадут под правило. + + + +## Как пишется + +```css +/* Один селектор вместо пары :link и :visited */ +.content :any-link { + text-decoration-color: #2E9AFF; + text-decoration-thickness: 2px; +} + +/* Альтернативно без :any-link */ +.content :link, +.content :visited { + text-decoration-color: #2E9AFF; + text-decoration-thickness: 2px; +} +``` + +## Как понять + +`:any-link` объединяет [`:link`](/css/link/) и [`:visited`](/css/visited/). Это снижает дублирование в стилях и исключает случай, когда стили «проваливаются» для посещённых ссылок из‑за отсутствия отдельного правила для [`:visited`](/css/visited/). + +Псевдокласс применяется только к элементам с действительным `href`. [``](/html/a/) без `href` и элементы, не являющиеся ссылками, под него не попадают. + +## Подсказки + +💡 Удобно использовать как «базовый» селектор для ссылок внутри компонента: `.card :any-link { … }`. +💡 Для выборки только некликабельных «ссылок» используйте отрицание: `a:not(:any-link)`. +💡 Добавляйте состояния [`:hover`](/css/hover/)/[`:focus-visible`](/css/focus-visible/) к тому же набору элементов: `.card :any-link:hover { … }`. diff --git a/css/index.md b/css/index.md index 9692ed7f2a..d323c279df 100644 --- a/css/index.md +++ b/css/index.md @@ -55,6 +55,7 @@ groups: - lang - root - indeterminate + - any-link - name: 'Псевдоэлементы' items: - pseudoelements