Css not class


The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

As mentioned earlier in this chapter, pseudo-classes help us define styles for documents based on information that is unable to be gleaned from the document tree or can’t be targeted using simple selectors. These include logical and linguistic pseudo-classes such as :not() and :lang(). It also includes user-triggered pseudo-classes such as :hover and :focus.

In this section, we’ll cover some esoteric and lesser-known pseudo-classes with a focus on what is available in browsers: child-indexed and typed child-indexed pseudo-classes, and input pseudo-classes. Child-indexed and typed child-indexed pseudo-classes let us select elements by their position in the document subtree. Input pseudo-classes target form fields based on their input values and states.

Highlighting Page Fragments with :target

A fragment identifier is the part of a URL that follows the #; for example, #top or #footnote1. You’ve probably used them to create in-page navigation: a so-called “jump link.” With the :target pseudo-class, we can highlight the portion of the document that corresponds to that fragment, and we can do it without JavaScript.

Say, for example, that you have series of comments or a discussion board thread:

<section id="comments">  <h2>Comments on this post</h2>  <article class="comment" id="comment-1146937891">...</article>  <article class="comment" id="comment-1146937892">...</article>  <article class="comment" id="comment-1146937893">...</article>  </section>

With some CSS and other fancy bits, it looks a little like what you see in the figure below.


Each comment in the aforementioned code has a fragment identifier, which means we can link directly to it. For example, <a href="#comment-1146937891">

. Then all we need to do is specify a style for this comment using the :target pseudo-class:

.comment:target {   background: #ffeb3b;   border-color: #ffc107  }

When the fragment identifier part of the URL matches that of a comment (for example, http://example.com/post/#comment-1146937891), that comment will have a yellow background, seen below.


You can use any combination of CSS with :target, which opens up some fun possibilities such as JavaScript-less tabs. Craig Buckler details this technique in his tutorial “How to Create a CSS3-only Tab Control Using the :target Selector.” We’ll update it a bit to use more CSS3 features. First, let’s look at our HTML:

<div class="tabbed-widget">  <div class="tab-wrap">  	<a href="#tab1">Tab 1</a>  	<a href="#tab2">Tab 2</a>  	<a href="#tab3">Tab 3</a>  </div>    <ul class="tab-body">  	<li id="tab1">  		<p>This is tab 1.</p>  	</li>  	<li id="tab2">  		<p>This is tab 2</p>  	</li>  	<li id="tab3">  		<p>This is tab 3.</p>  	</li>  </ul>  </div>  

It’s fairly straightforward, consisting of tabs and associated tab content. Let’s add some CSS:

[id^=tab] {   position: absolute;  }  [id^=tab]:first-child {   z-index: 1;  }  [id^=tab]:target {   z-index: 2;  }

Here’s where the magic happens. First, we’ve absolutely positioned all of our tabs. Next, we’ve made our first tab the topmost layer by adding z-index: 1. This is only important if you want the first tab in the source order to be the first tab users see. Lastly, we’ve added z-index: 1 to our target tab. This ensures that the targeted layer will always be the topmost one. You can see the result below.


Clicking a tab updates the URL with the new document fragment identifier. This in turn, triggers the :target state.

Negating Selectors with :not()

Perhaps the most powerful of this new crop of pseudo-classes is :not(). It returns all elements except for those that match the selector argument. For example, p:not(.message)

selects every p element that lacks a message class.

The :not() pseudo-class is what’s known as a functional pseudo–class. It accepts a single argument, much like functions in other programming languages do. Any argument passed to :not() must be a simple selector such as an element type, a class name, an ID, or another pseudo-class. Pseudo-elements will fail, as will compound selectors such as label.checkbox or complex selectors such as p img.

Here’s an example of a form that uses textual input types and radio buttons:

<form method="post" action="#">   <h1>Join the Cool Kids Club</h1>   <p>  	 <label for="name">Name:</label>  	 <input type="text" id="name" name="name" required>   </p>      <p>  	 <label for="email">Email:</label>  	 <input type="email" id="email" name="email" required>   </p>   <fieldset>  	<legend>Receive a digest?</legend>  	<p>  		<input type="radio" id="daily" name="digest">  		<label for="daily" class="label-radio">Daily</label>   		<input type="radio" id="weekly" name="digest">  		<label for="weekly" class="label-radio">Weekly</label>  	</p>   </fieldset>   <button type="submit">Buy Tickets!</button>  </form>  

In the HTML, labels associated with a radio type have a .label-radio class. We can use the :not() pseudo-class: to target those elements without a label-radio class, as shown in in the figure below:

label:not(.label-radio) {   font-weight: bold;   display:block;   }


Here’s a trickier example. Let’s create styles for textual inputs. These include input types such as number, email, and text along with password and url. But let’s do this by excluding radio button, check box, and range inputs. Your first instinct might be to use the following selector list:

([type=radio]),  input:not([type=checkbox]),  input:not([type=range]) {   ...  }

Unfortunately, this won’t work, as each selector overrides the previous one. It’s the equivalent of typing:

input:not([type=radio]){ ... }  input:not([type=checkbox]) { ... }  input:not([type=range]) {... }  

Instead, we need to chain our :not() pseudo-classes, so that they all filter the input element:[4]

input:not([type=radio]):not([type=checkbox]):not([type=range]) {  ...  }

Using pseudo-classes (and pseudo-elements) without a simple selector is the equivalent of using it with the universal selector. In other words, :not([type=radio]) is the same as *:not([type=radio]). In this case, every element that lacks a type attribute and value of radio will match―including html and body. To prevent this, use :not() with a selector such as a class name, ID, or attribute selector. By the way, this also holds true true for class name, ID, and attribute selectors: .warning and [type=radio] are the same as *.warning and *[type=radio].

CSS Selectors Level 4 refines the way :not() works, so that it can accept a list as an argument, and not just simple selectors. Rather than chaining pseudo-classes as previously, we’ll be able to use a comma-separated argument:

input:not([type=radio], [type=checkbox], [type=range]) {  ...  }  

Unfortunately, no major browser supports this yet, so use chaining in the meantime.


Css not class

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

От переводчика

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


  1. Используем псевдо-класс :not для задания рамки навигации
  2. Добавляем межстрочный интервал элементу body
  3. Центрируем по вертикали все что угодно
  4. Правильно разделяем запятыми элементы списков
  5. Отрицательный порядковый номер в nth-child
  6. Используем SVG-логотипы
  7. Аксиоматический CSS
  8. Максимальная высота у CSS-слайдера
  9. Наследуем box-sizing
  10. Одинаковая ширина ячейки таблицы
  11. Динамические внешние отступы при помощи flexbox
  12. Используем селектор атрибутов пустых ссылок
  13. Стили по умолчанию для обычных ссылок

Используем псевдо-класс :not для задания рамки навигации

Вместо того, чтобы задавать рамку (border) таким образом…

/* добавляем рамку */ .nav li {  border-right: 1px solid #666; } 

… да еще и обнулять border последнему элементу…

/* удаляем рамку */ .nav li:last-child {  border-right: none; } 

… можно было просто использовать псевдо-класс :not(), который поможет нам выбрать только нужные элементы:

.nav li:not(:last-child) {  border-right: 1px solid #666; } 

Конечно, вы могли использовать такую выборку .nav li + li или даже .nav li:first-child ~ li, однако, если мы намеренно используем :not(), нам ясно, что CSS определяет границу всем элементам, кроме последнего, и теперь любому человеку будет понятно, что здесь происходит. Этот способ поддерживается в IE9+ и остальных.

Добавляем межстрочный интервал элементу body

Вам не следует добавлять высоту строки для каждого параграфа или заголовка (<р>, <h*>), соответственно, определяя каждый элемент. Вместо этого, добавьте этот код в тело элемента body:

body {  line-height: 1; }   

Вот таким вот образом, любые текстовые элементы наследуют это свойство от главного родительского элемента body.

Центрируем по вертикали все что угодно

Нет, это не черная магия, вы действительно можете центрировать любой элемент по вертикали:

html, body {  height: 100%;  margin: 0; }  body {  -webkit-align-items: center;   -ms-flex-align: center;   align-items: center;  display: -webkit-flex;  display: flex; } 

Хотите центрировать как-то еще? Вертикально, горизонтально… как-нибудь, где-нибудь? На CSS-Tricks вы можете ознакомиться со статьей и тогда вы сможете делать все, что угодно. Пример имеет поддержку в IE11+ и остальных.

Примечание: Следите за багами (ошибки) flexbox в IE11 и контролируйте процесс html-верстки.

Правильно разделяем запятыми элементы списков

Мы можем сделать наши элементы li так, чтобы они действительно выглядели как реальный список, записи которого разделены запятыми:

ul > li:not(:last-child)::after {  content: ","; } 

Используя псевдо-класс :not(), мы добавляем после каждого элемента ul-списка запятую, кроме последнего.

Отрицательный порядковый номер в nth-child

Используем отрицательные аргументы в nth-child для выбора элементов с 1 по n.

li {  display: none; }  /* выбираем элементы с 1 по 3 и отображаем их */ li:nth-child(-n+3) {  display: block; }   

Или, теперь, когда мы знаем все об использовании псевдо-класса :not(), можем попробовать так:

/* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */ li:not(:nth-child(-n+3)) {  display: none; } 

Ну, что, было довольно легко.

Используем SVG-логотипы

Нет, никаких причин не использовать SVG:

.logo {  background: url("logo.svg"); } 

SVG хорошо масштабируется под любое разрешение и поддерживается во всех браузерах, IE9+.Теперь мы можем использовать svg, вместо .png, .jpg, or .gif-файлов.

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

.no-svg .icon-only::after {  content: attr(aria-label); } 

Аксиоматический CSS

Лоботомированная сова (аксиоматический СSS), да, это довольно странное название, однако с помощью универсального селектора (*) и одноуровневого селектора (+) можно получить мощные возможности CSS:

* + * {  margin-top: 1.5em; } 

В этом примере, все элементы в потоке, которые расположены после другого элемента, должны получить верхний отступ равный 1.5em.Более подробную информацию о "лоботомированной сове" можете прочитать в статье Хейдона Пикеринга, или перевод на русском.

Максимальная высота у CSS-слайдера

Реализовать CSS-слайдер можно с помощью «max-height» и «overflow:hidden»:

.slider ul {  max-height: 0;  overflow: hidden; }  .slider:hover ul {  max-height: 1000px;  transition: .3s ease; /* анимация для max-height */ } 

Наследуем box-sizing

Пусть box-sizing наследуется от html:

html {  box-sizing: border-box; }  *, *:before, *:after {  box-sizing: inherit; } 

Теперь нам проще контролировать box-sizing в плагинах или компонентах, которые используют свои правила поведения. Поддержка в IE8+ и остальных.

Одинаковая ширина ячейки таблицы

Иногда, таблицы могут причинять боль в работе, поэтому попробуйте использовать table-layout: fixed, чтобы задействовать ячейки одинаковыми по ширине:

.calendar {  table-layout: fixed; } 

Мы избавляемся от боли с помощью table-layout. Поддержка в IE8+ и остальных.

Динамические внешние отступы при помощи flexbox

При работе с колоночным макетом, вы можете избавиться от использования css-селекторов nth-*, first-*, и last-child при помощи flexbox значения space-between:

.list {  display: flex;  justify-content: space-between; }  .list .person {  flex-basis: 23%; /* базовый размер отдельно взятого блока */ } 

Поддержка в IE11+ и остальных.

Используем селектор атрибутов пустых ссылок

Отображаем ссылки, когда a-элемент не имеет текстового значения, но при этом атрибут href содержит ссылку:

a[href^="http"]:empty::before {  content: attr(href); } 

Это довольно удобно. Поддержка в IE9+ и остальных.

Стили по умолчанию для обычных ссылок

Добавляем по умолчанию стиль ссылкам:

a[href]:not([class]) {  color: #008000;  text-decoration: underline; } 

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


Как работает в CSS псевдокласс not

От автора: всем привет. Сегодня мы с вами рассмотрим достаточно специфичную тему. А именно, как работает в css псевдокласс not. Возможно, многие из вас вообще ничего не знают о нем, но тем не менее данный псевдокласс иногда очень помогает при верстке. Подробно суть работы с ним рассмотрим сейчас.

Css not class

Вообще как выглядит выбор элементов в css? Вы прописываете какой-либо селектор и таким образом происходит выбор. Например: p{} – выберет все абзацы; table{} – выберет все таблицы;

И так далее. Так вот, псевдокласс not работает наоборот – он позволяет не выбрать какой-либо элемент. Сам по себе псевдокласс применять нет смысла, а только в связке с другими селекторам. Not позволяет как бы исключить элемент из выбора. Например, выбрать все списки, кроме какого-то одного.

Пример работы псевдокласса not я сейчас попробую написать. Итак, есть три абзаца, в каждом есть какой-то текст.

Как видите, третьему абзацу мы дали стилевой класс. Допустим, вы хотите сделать цвет текста во всех абзацах, кроме одного – зеленым. Пишем вот так:

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

Синтаксис псевдокласса not, как вы уже могли догадаться, таков:

В случае с абзацами мы вполне могли обойтись и без стилевого класса. Давайте его уберем у третьего абзаца и подумаем, как его теперь можно исключить? Ну конечно, в голову в первую очередь приходит nth-child или nth-of-type. Это псевдоклассы, которые позволяют выбрать элемент по его порядковому номера в родительском элементе.

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

Css not class

В условии к селектору not, которое указывается в скобках, вы можете использовать селекторы любого уровня сложности и вложенности. То есть если вы напишете что-то в этом духе:

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

Применение в реальной практике

Хорошо, мы рассмотрели достаточно оторванные от реальности примеры, но и в реальной практике псевдокласс not может вам пригодится. Например, при работе с меню.

Если в меню есть разделители, то обычно разделитель не должен присутствовать у первого или последнего пункта меню. И это очень легко реализовать. Просто задаем первому или последнему пункту какой-нибудь стилевой класс, либо исключаем его с помощью nth-child/nth-of-type.

Опять же, тут вполне можно было бы обойтись и без not. Вы можете сначала задать разделители для всех пунктов, а потом просто переопределить для нужного пункта стиль, убрав этот разделитель. Но это уже потребует от вас написать на 2-4 строчки кода больше. В случае с not же вы очень элегантно в одной строке решаете всю проблему.

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

Псевдокласс not очень удобно использовать, когда нужно выбрать группу элементов и привязать к ним стили, но при этом исключить из этой группы 1-2 элемента. Советую вам взять на вооружение эту возможность css и использовать ее в верстке.

Css not class


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.