Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование отрицающего псевдокласса CSS3

19 апреля 2016 | Опубликовано в css | 1 Комментарий »

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

 

Что же он делает? 

Вероятно, само по себе название этого псевдокласса уже дает представление о его функции, что он просто выберет все элементы, кроме указанных в нем, или элементы с условиями, противоположными заданным. Рассмотрим примеры далее.

Такая запись выберет все элементы, кроме текстовых:

<code>:not(p)</code>

А эта запись выберет все блочные элементы, которым не задан класс abc:

<code>div:not(.abc)</code> 

Теперь рассмотрим применение этого псевдокласса в настоящем применении.

Для начала создадим текст с несколькими ссылками на сайт Википедии и несколькими ссылками на другие сайты. Вот как выглядит разметка HTML для этого текста:

<article>
    <h1>The CSS :not Selector Demo</h1>
    <p>Jujubes applicake sesame snaps chupa chups <a href="http://www.thisisnotwikipedia.com/">chocolate cake</a>. Oat cake marshmallow wypas toffee donut cake. Chupa chups jelly cupcake gummi bears. Lemon drops cake wafer.</p>
    <p><a href="http://en.wikipedia.org/wiki/Cheesecake">Cheesecake chocolate cake donut</a> jelly sweet roll powder soufflé chocolate cake. Wypas cotton candy lemon drops cookie candy donut bonbon marzipan. Macaroon candy liquorice jelly-o. Chocolate pie sweet roll candy <a href="http://en.wikipedia.org/wiki/Marshmallow">marshmallow</a> dragée cotton candy brownie marshmallow.</p>
    <p>Pudding topping marshmallow bear claw. Pie muffin pastry gummies <a href="http://www.exampledomain.com">fruitcake brownie</a> jelly gingerbread sesame snaps. Candy pudding cupcake bear claw. Carrot cake muffin cotton candy tootsie roll muffin. Jelly beans tart dragée sweet icing <a href="http://en.wikipedia.org/wiki/Chocolate_bar">wafer topping chocolate bar</a>. Sweet roll toffee sugar plum pastry dragée <a href="http://www.somename.co/">bonbon candy muffin</a>.</p>
    <p><a href="http://en.wikipedia.org/wiki/Pastry">Cake marzipan applicake pastry</a> wypas fruitcake. Oat cake chocolate wypas dragée sugar plum carrot cake icing. Caramels chocolate bar croissant wafer cupcake pie jujubes chocolate bar. Biscuit candy canes dragée.Candy brownie oat cake sesame snaps cheesecake powder tootsie roll biscuit bear claw. Soufflé gummi bears jelly beans sesame snaps faworki <a href="http://en.wikipedia.org/wiki/Dessert">cookie dessert sweet bonbon</a>.</p>
</article>

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

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

a:after {
        display: inline-block;
    }

После этого, чтобы выбрать все ссылки, не ведущие на сайт Википедии, объединим отрицающий псевдокласс и селектор признака. В этом случае селектор признака выберет все ссылки с признаком адреса, начинающимся с http://en.wikipedia.org/, результат объединится с отрицающим псевдоклассом, и будет выбрано противоположное. Для этого нужна следующая запись:

a:not([href^="http://en.wikipedia.org/"]):after {
   background-color: #F8EEBD;
   border: 1px solid #EEC56D;
   border-radius: 3px 3px 3px 3px;
   color: #B0811E;
   content: "!";
   font-size: 10pt;
   margin-left: 5px;
   padding: 1px 6px;
   position: relative;
}

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

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

Заключение 

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

Можно создавать еще более интересные эффекты с помощью этого псевдокласса.

Автор урока Thoriq Firdaus

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




Комментарии

  1. DH
    Thumb up Thumb down 0

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