Css target blank: Возможно ли в css сделать target=»_blank»? — Хабр Q&A

Плагин отнесен в категорию target

Better RSS Widget

Replacement for the built in RSS widget that adds an optional link target, shortcode, and…

Browser Specific CSS

The Browser Specific CSS Plugin allows you to easily target specific browsers and operating systems…

Target Blank to Button Block

Add Target Blank to Gutenberg Button Block. Provisory fix to add target blank to button…

TK Shortcode Link

Create links with a shortcode. It’s that simple.

Nofollow for External Link TAP

Just simple, if you use this plugins, rel=nofollow and target=_blank will be insert automatically, for…

Blank Target Replacement

A target=_blank replacement using a small piece of javascript and rel=external.

LDB External Links

LDB External Links turns all your links with target=»_blank» into rel=»external» and uses Javascript to…

Content Links Modifier

Use Content Links Modifier plugin and automatically add link target=“_blank” to open content links in…

Accesible _blank

Open links in a new window but in a accesible way. Abre enlaces en una…

Integrate myTarget for WooCommerce

Этот плагин помогает настроить счетчик myTarget для динамического ремаркетинга для WooCommerce.

External Linker

Allows you to get around using target=»_blank» by converting all your outbound links using Javascript.

Aw target blank

You don’t need to set target blank to open link in new tab in each…

Autoblank for link

Плагин автоматически внедряет во все ссылки параметр target=»_blank» в тексте статьи.

html — добавить target=»_blank» в CSS

спросил 9 лет, 11 месяцев назад

Изменено 1 год, 11 месяцев назад

Просмотрено 175 тысяч раз

У меня есть внешние ссылки в верхнем меню моего сайта.

Я хочу открыть эти ссылки в новых вкладках. Я мог бы достичь этого, используя target=_blank в HTML. Есть ли подобное свойство CSS или что-то еще?

• HTML
• CSS
• гиперссылка

Как упоминалось в c69, это невозможно сделать с помощью чистого CSS.

, но вместо этого вы можете использовать HTML:

используйте

 
    <базовая цель="_blank">

 

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

 test-link
 

и он переопределит

 
    <базовая цель="_blank">

 

, если он был определен ранее.

К сожалению, нет. В 2013 году это невозможно сделать с помощью чистого CSS.

Обновление : спасибо showdev за ссылку на устаревшую спецификацию гиперссылок CSS3, и да, ни один браузер не реализовал ее. Так что ответ остается в силе.

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

  a[href="#"] { цвет: лесной зеленый; вес шрифта: нормальный; }
a[href="http"] {цвет: dodgerblue; вес шрифта: нормальный; }
 

Вы также можете настроить таргетинг на традиционный встроенный HTML ‘target=_blank’.

 a[target=_blank] { вес шрифта: полужирный; }
 

Также: селектор цели для стиля целей блока навигации и элементов.

 навигация { дисплей: нет; }
навигация: цель { дисплей: блок; }
 

Поддерживается селектор псевдокласса CSS: target — caniuse, w3schools, MDN.

 a[href="http"] { цель: новая; имя-цели: новое; цель-новая: вкладка; }
 

Свойство CSS/CSS3 ‘target-new’ и т. д., не поддерживаемое ни одним из основных браузеров, август 2017 г., хотя оно является частью спецификации W3 с февраля 2004 г.

«модальная» конструкция W3Schools использует псевдокласс «:target», который может содержать навигацию WP. Вы также можете добавить HTML rel=»noreferrer и noopener рядом с target=»_blank» для повышения производительности

Другой способ использования target="_blank" :

 onclick="this.target='_blank'"
 

Пример:

 Ваш текст
 

 var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
 

 для (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}
 

 sed -i 's|href="http|target="_blank" href="http|g' index.html
 

 Внутренняя ссылка
 

и

 Внешняя ссылка
 

Я могу использовать CSS для внешней ссылки, используя:

 a[target="_blank"]
 

Но я не знаю, как выбрать с помощью CSS всю ссылку без атрибута "target=_blank".

Я пытаюсь использовать a[target="_self"] , но это не работает, потому что атрибут target отсутствует во "внутренней ссылке".

• HTML
• CSS
• CSS-селекторы

Вы можете использовать селектор :not

 a[target="_blank"] {
  цвет: зеленый;
}

а: не ([target="_blank"]) {
  цвет: фиолетовый;
} 

 <р>
    Внешняя ссылка


    Внутренняя ссылка
 

Вы можете использовать селектор :not() в соответствии с другими ответами, или вы можете просто заставить CSS специфичность работать на вас:

Теперь селектор a {} будет работать для тех селекторы , которые , а не внешние.

 а[цель="_blank"] {
  цвет: зеленый;
}

а {
  красный цвет;
} 

 Внутренняя ссылка
Внешняя ссылка 

Вы можете использовать селектор

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