Css not

:not() принимает только один простой селектор за раз; это упоминается в Selectors 3 spec:

Псевдокласмент отрицания :not(X) является функциональной нотацией, содержащей простой селектор (за исключением самого псевдокласса отрицания) как аргумент. Он представляет элемент, который не представлен его аргументом.

Простыми селекторами в вашем примере будут два тега div, которые у вас есть. Другие простые селекторы включают селекторов классов, селекторов идентификаторов, селекторов атрибутов и псевдоклассов. Он не принимает более одного простого селектора и не принимает комбинаторы, такие как > или пробел.

В зависимости от того, какие элементы вы пытаетесь выбрать точно, может не быть способа исключить div > div:


  • Если вы хотите выбрать только те элементы, которые являются дочерними элементами div, которые сами не являются div, используйте вместо этого:

    div > :not(div) 
  • Если вы хотите только выбрать элементы div, родительский элемент которых не является div, используйте вместо этого:

    :not(div) > div 

Если вы хотите использовать это отрицание самостоятельно, выбирая все остальные элементы, тогда нет способа использовать только селектор.

Единственное возможное обходное решение в CSS, которое я могу придумать, — применить стили к элементам, которые вы хотите, без выражения :not(), а затем отменить их для div > div. Это работает для любого набора элементов, которые вы пытаетесь настроить; недостатком является то, что не все свойства могут быть легко reset.

В качестве альтернативы, если вы используете jQuery, который поддерживает :not(div > div) в отличие от версии CSS, вы можете поместить селектор в script и, для экземпляр, jQuery применяет имя класса к этим элементам, а затем предназначает этот класс в вашем CSS.

qaru.site

Have you created custom CSS for your forms, but not been able to see those styles when viewing your site? In this tutorial, we’ll walk through options to troubleshoot why your CSS is not working and offer possible solutions.

We’ll discuss the most common issues that cause CSS to not work:

  • Browser Caching
  • Invalid CSS Format
  • CSS Specificity


Browser Caching

Browsers will often cache, or temporarily store, resources from websites you visit in order to improve load speed. Some sites will also use plugins for additional caching. Often when you don’t see your custom styles on your site, it’s because the browser or other system has cached an older version of your site.

Here’s a tutorial that’ll walk you through all of the main steps to clear your site and plugin caches.

If clearing your browser cache doesn’t seem to work, here are a couple of additional strategies to try:

Try a Different Browser
Each browser will keep its own cache of the sites you visit. By opening your site in a different browser (or in the private mode offered by some browsers, such as Chrome’s incognito window), you can often see an uncached version of your site.

Ask Your Host if They Have a Cache
Some hosts will provide caching for your site right in their servers, which is where your site files are stored. If you’re not sure, you may want to contact your host to ask if they are caching your site and, if they are, ask them to clear that cache for you.


Try a Different Internet Source
Occasionally, just loading your site over a different internet source can help to bypass an existing cache. If you have a mobile device with available data, the simplest way to do this is to temporarily turn off WiFi on your device and reload the page.

Invalid CSS Format

CSS must be written in a specific format in order for a browser to understand it. There are many online tools to check that your CSS is valid, including W3School’s CSS Validator. This is an excellent option if you have a lot of custom CSS and at least a little previous experience creating CSS.

If you are only using a small amount of CSS, however, it may sometimes be easier to do a quick format check of your own. Let’s start by looking at a snippet of valid CSS:

div.wpforms-container-full .wpforms-form .wpforms-title {   font-size: 26px;   margin: 0 0 10px 0;  }  

Here’s why this CSS is valid, or ‘readable’ by browsers:

  • Correct selector format: If the selector includes multiple parts, it needs to be written from ‘biggest’ to ‘smallest’. In the example above, div.wpforms-container-full is the biggest container element in the HTML, while .wpforms-form is inside of that container. The smallest and last item in the selector, .wpforms-title, is contained inside of both of those other elements. In any other order, the browser won’t be able to read this selector.

  • Two brackets: There must be a curly bracket right after the CSS selector and at the end of the property/value list. Forgetting that closing bracket is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
  • Colon and semicolon: Be sure to include a colon (:) between every CSS property and value (for example, font-size: 26px) and a semicolon (;) after every value so the browser can read your CSS.
  • Correct use of whitespace: For the most part, CSS isn’t very picky about whitespace (which includes tabs and spaces). An exception to this, however, is for units. 26px will work, for example, while 26 px will not.

For more information on writing CSS with proper syntax, you can check out this tutorial from W3Schools.

wpforms.com

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.


При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

Селекторы атрибутов

($=) – атрибут оканчивается определенным значением

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

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):


Селектор будет выглядеть следующим образом:

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

Выбор этого элемента будет выглядеть следующим образом:

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

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

Краткий обзор селекторов атрибутов:

  • = значение атрибута эквивалентно определённым символам;
  • $= значение атрибута оканчивается определенными символами;
  • ^= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.

Псевдоклассы селекторов

Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:


Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

Можно пойти дальше и выбирать любые атрибуты.

Например:

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

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

Этот подход освобождает от необходимости использования JavaScript.

Псевдокласс :first-of-type

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

www.internet-technologies.ru


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

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

Css not

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

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

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


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

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

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

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

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

Css not

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

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

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

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


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

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

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

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

Css not

webformyself.com


You May Also Like

About the Author: admind

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

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

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

Adblock
detector