Red error color

Pure CSS Custom Error Messaging for Default Form Elements

This tutorial will show you how to create and customize error messaging for various form elements. In this tutorial, we will customize everything from a basic error message to input field errors and tooltips. The best part? We will be using only CSS for customizations – that means no images or javascript required!

Below is the markup for the form elements we will be creating error messaging for. This is all of the HTML used throughout this tutorial. Copy and paste this code into your working file:

Now onto my personal favorite: the CSS. We will keep the basic functionality of the form elements but completely customize their appearance. In the end, they will stand on their own as custom design elements that thoughtfully guide the user through the form process, making it as straightforward and painless as possible .

Basic Error Message

Let’s start with a basic error message. We are going to customize the HTML above to look like this:

This is what we start out with, by default, after adding the HTML:

Customizing a basic error message is really simple. All we have to do is give our text a colored background and a couple font styles using CSS. To style the error message background, add the following styles to your CSS stylesheet:

Now let’s style the text itself by adding the following font styles:

That’s it! Keep reading to learn how to style input field and tooltip errors .

Input Field Error

Now that we have our basic error message styled, let’s work on input field errors. This is what the final product will look like:

And this is what we start out with by default:

First, we want to override the browser’s default styles. Add the following CSS to give your input field a custom look:

Next, we need to add the styling for the error message that displays when a user does not correctly fill out an input field (i.e. the “This is a required field” message):

Lastly, add the error-specific styling for the input field elements:

Input Field Error with Tooltip

The last element we’re tackling is the tooltip. It is slightly more complicated than the others but well worth the effort. We will also be utilizing Sass nesting to better organize our code, and because we are only using SCSS it is 100% editable and scalable.

Once we are done, the tooltip will look like this:

And by default, this is what we start with after adding the HTML:

First, we override the browser’s default styles with our own custom styling:

Just like our previous example, we need to add the tooltip error message styling that displays when a form error occurs. Note: we are using Sass here to nest the tooltip’s left arrow properties. This comes in handy when trying to keep track of which values are assigned to the tooltip specifically:

Now all that’s left to do is define the input’s error-specific styling. Again, we will nest these styles under an “error” class selector to make classification and future changes easier:

And that’s it! All the code you need to customize error messaging for default form elements. To experiment with the final results and copy and paste to your heart’s content (without fear of breaking anything), jump on over to Codepen by selecting any of the tutorial links below.

Источник

Цвета в CSS

Цвета играют жизненно важную роль в формировании внешнего вида веб-страниц. С помощью CSS мы можем управлять основным цветом элементов и их фоновым цветом. Для этого, соответственно, используются свойства color и background . Когда, много лет назад, я изучал CSS, мне не удалось найти доходчивого руководства по использованию цветов в CSS. Поэтому я решил написать такое руководство сам. В этом материале я расскажу о типах цветов и о ключевых словах, используемых при работе с цветами. Мы поговорим о том, в каких ситуациях используются те или иные методики работы с цветами и рассмотрим примеры. Сразу скажу, что здесь я не буду касаться теории цвета.

Свойство color

На MDN можно найти сведения о том, что CSS-свойство color позволяет задавать основной цвет элемента (foreground color, его также называют «цветом переднего плана»), который описывает цвет текста элемента и цвет элементов оформления текста. На основе значения этого свойства устанавливается значение currentColor .

Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:

• Названия именованных цветов.
• Шестнадцатеричные коды цветов.
• Цвета, задаваемые с помощью функций rgb() и hsl() .
• Глобальные значения inherit , initial , unset .
• Ключевое слово currentColor .

Рассмотрим разные способы описания цветов в CSS.

Именованные цвета

CSS поддерживает стандартные наименования цветов, которые можно использовать, просто указывая в качестве значения свойства color имя нужного цвета. Вот как это выглядит:

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

В целом, я — не фанат именованных цветов, так как мне нелегко запомнить то, как именно выглядят такие цвета. Например, иногда я вижу, как веб-разработчики, в качестве значения свойства color , используют имена цветов white или black . Это, конечно, нельзя назвать неприемлемым, я не берусь осуждать тех, кто так поступает. Но, в целом, я не рекомендовал бы пользоваться именованными цветами. Вот единственная ситуация, в которой я воспользовался бы такими цветами:

Здесь я использую красный цвет ( red ) для того чтобы быстро показать обводку всех элементов страницы. Цвет red популярен в подобных ситуациях, мне даже доводилось видеть мемы об этом.

Шестнадцатеричные цветовые значения

Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет. При описании цветов с использованием шестнадцатеричных значений есть одна особенность, позволяющая, в определённых ситуациях, использовать сокращённую запись кода цвета.

Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:

Значение #222222 эквивалентно значению #222 . Если представить исходный шестнадцатеричный код в виде 22 , 22 , 22 , то, чтобы получить из него код 2 , 2 , 2 , достаточно взять из каждой пары значений по одному.

Сокращение шестнадцатеричных кодов цветов

Цвета, задаваемые в формате RGB/RGBA

При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.

Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.

При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :

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

Цвета, задаваемые в формате HSL

Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.

На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.

Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.

Выбор цветового тона

Для выбора насыщенности и светлоты можно воспользоваться удобным инструментом, который находится здесь. А именно, после выбора тона, насыщенность и светлоту цвета можно представить так, как показано ниже.

Выбор насыщенности и светлоты

Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.

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

Ключевое слово currentColor

Ключевое слово currentColor хранит значение CSS-свойства color . Его можно использовать для настройки элементов, которые, по умолчанию, не наследуют цвета от их родительских элементов. Вот некоторые свойства, значения которых, по умолчанию, устанавливаются равными currentColor :

• border-color
• text-decoration-color
• outline-color
• box-shadow

Тут может возникнуть такое ощущение, что currentColor — это нечто вроде CSS-переменной. Но это ключевое слово появилось ещё до того, как в CSS стало можно работать с переменными. Рассмотрим следующий пример:

Как думаете, каким будет значение свойства border-color ? Очевидно — таким же, как и значение свойства color . Это так из-за того, что, по умолчанию, значением border-color является значение currentColor . Возможно, это легче представить себе, если переписать предыдущий пример так:

Интересной особенностью currentColor является тот факт, что это ключевое слово можно использовать и на уровне родительского элемента, и для дочерних элементов.

В этом примере currentColor можно использовать и для элемента

, и для элемента :

Использование инструментов разработчика для исследования цветов

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

Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:

Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.

Браузеры по-разному работают с переменными

Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.

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

Вышеописанная проблема проявляется не всегда. Например, основной цвет кнопки задан в виде color: #fff , а её фоновый цвет указан с использованием hsl() . В такой ситуации можно открыть палитру инструментов разработчика, обратившись к свойству color , и взглянуть на уровень контраста. Правда, для элементов, которые используют HSLA-значения с CSS-переменными, этого сделать нельзя.

Цветовые значения, разделённые пробелами

Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.

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

Новый способ описания цветов лучше старого. Рекомендуется пользоваться именно им, так как новые CSS-функции, используемые для описания цвета ( lab() , lch() и color() ), будут работать только с переданными им значениями, разделёнными пробелами. Поэтому полезно будет привыкнуть к такому формату описания цветов, предусмотрев, что несложно, запасной вариант для тех браузеров, которые этот формат не поддерживают.

Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.

Глобальные значения (inherit, initial, unset)

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

▍Ключевое слово inherit

Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:

Учитывая то, что свойство color родительского элемента установлено в значение #222 , как вы думаете, каким будет цвет дочерних элементов? Элементы

Цвет ссылок, используемый по умолчанию, выглядит так:

Если надо — можно, с помощью конструкции color: inherit , сделать так, чтобы ссылка, всё же, унаследовала бы цвет от родительского элемента.

▍Ключевое слово unset

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

Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:

Использование вышеприведённой конструкции позволит сбросить цвет до цвета, который может быть унаследован от элемента .hero . А это — именно то, что нам нужно.

Здесь со всем этим можно поэкспериментировать.

Сценарии использования и практические примеры

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

▍Полупрозрачный RGBA-цвет

Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.

Обратите внимание на то, что у окружностей имеются границы, которые темнее, чем фон этих окружностей. Как сделать это динамически? А сделать это можно, воспользовавшись границей, полупрозрачный цвет которой задан с применением функции rgba() :

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

▍Использование HSL-цветов

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

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

Кнопка становится темнее при наведении на неё указателя мыши

Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.

Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.

Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.

Обратите внимание на то, как я создал цветовую палитру, основываясь лишь на одном цветовом тоне и меняя светлоту итогового цвета.

Цвет и изменение светлоты

Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.

При работе над большими проектами я использовал бы следующий подход, подразумевающий применение CSS-переменных и задействующий изменение светлоты цвета:

Здесь я определил переменную —primary-h , хранящую сведения о цветовом тоне, и переменную —primary-l , в которую записано значение, представляющее собой базовую светлоту. Самое приятное тут то, что у меня теперь есть возможность настраивать цвет, меняя лишь переменную —primary-l :

Здесь можно найти рабочий пример.

▍Использование ключевого слова currentColor с SVG-иконками

Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.

Значок и текст должны быть одного цвета

Ключевое слово currentColor можно использовать для настройки SVG-атрибута fill , а затем назначить нужный цвет родительскому элементу. Взгляните на следующий HTML-код:

Вот применяемый здесь стиль:

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

Более того, тот же подход можно использовать для того чтобы создавать иконки, заключённые в прямоугольные полупрозрачные области, атрибут fill которых также задаётся с помощью currentColor . Это позволяет использовать CSS-свойство color для решения следующих задач:

1. Назначение цвета иконке.
2. Назначение прямоугольнику полупрозрачного варианта исходного цвета.

Взгляните на следующий рисунок.

Настройка иконки, заключённой в цветной полупрозрачный прямоугольник

Вот соответствующий CSS-код:

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

Итоги

Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.

Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?

Источник

Ok, some things I would do:

1- Don’t link to an element id, instead, link the event to the form:

$("#submit_value").click(function() {
$('form.validate').submit(function() {

With this, you’ll have to add the class ‘validate’ to the html form. And by this way any submit button will check the form, even if you use jquery to trigger the form’s submit, and you’ll be able of reuse jquery code

2- Use classes to add the style.
With classes, you can easily define how will be the error element style:

input.error {
    background-color:red;
    border: 1px solid red;
}
select.error {
    border: 1px solid red;
}

And it’s easy to append to an element a class than all an style.

3 — Create a reserved space for your messages in the html, with the loaded message, hidden. It’ll be easy to you to change the message you want to show, from PHP.

<tr>
    <td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
</tr>

should contain something like:

<tr>
     <td colspan="3" class="errorMsg">
     <p id="errorIDelement">Error with input IDelement</p>
     <p id="errorUserCheck">Please select atleast one checkbox for user type</p>
     </td>
</tr>

Your jquery code, would be something like:

$("form.validate").submit(function(e){
    $form = $(this);
    e.preventDefault(); 

    //Not selected checkbox:
    $errorChecks = $form.find('input[type=checkbox]:checked');

    if($errorChecks.length != 0) {
      $errorChecks.each( function(){
          // This would highlight error 
          $(this).addClass('error');
          // This would show error in your list
          $id = $(this).attr('id');
          $('#error'+$id ).show();              
      });
    } else if($("#users").is(":checked") && $('.option_users').find('input[type=checkbox]:checked').length == 0) { 
         $('.errorMsg .errorUserCheck').show();
         $("#users").addClass('error');
      } else {
      // If we arrived here, we have validated all, and can submit
      $form.submit(); 
    }
});

It’s not checked, and a long answer, if you have any doubt, just post again,

We can distinguish a valid and invalid field by colors. The label, message and feedback icon associated with a valid field usually have a color which looks like green. When the field is not valid, these elements have a red-like color.

This example shows two approaches for changing these colors.

Overriding the colors

If your form uses the Bootstrap framework, FormValidation adds .has-success or .has-danger class to the field container based on the field validity. The field element will be added .is-valid or .is-invalid class.

The label, field, message and feedback icon elements will receive the associated validation styles:

.fv-help-block {
    color: #dc3545;
}
.has-danger .fv-plugins-icon {
    color: #dc3545;
}
.has-success .fv-plugins-icon {
    color: #28a745;



  


                       
  



}

So, it’s quite easy for you to override these colors for all forms or particular form as below:

.my-form.fv-plugins-bootstrap .fv-help-block {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-danger .fv-plugins-icon {
    color: #f39c12;
}
.my-form.fv-plugins-bootstrap .has-success .fv-plugins-icon {
    color: #18bc9c;



  


                       
  



}

Overriding row classes

As mentioned in the previous section, based on the field validity, the plugin will adds different classes for the field container. The valid and invalid classes can be defined via the rowValidClass and rowInvalidClass options which take the following default values:

By using your own classes for these options, you can easily customize the look and feel of valid and invalid fields:

.my-field-error .fv-plugins-message-container,
.my-field-error .fv-plugins-icon {
    color: #ff0039;
}
.my-field-success .fv-plugins-message-container,
.my-field-success .fv-plugins-icon {
    color: #2780e3;



  


                       
  



}

The last step is to use the new options:

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            tachyons: new FormValidation.plugins.Tachyons({



  


                       
  



                rowInvalidClass: 'my-field-error',
                rowValidClass: 'my-field-success',
            }),
        },
    }
);

See also

• Hiding success class
• Hiding success class and icon for optional field

$('document').ready(function(){

    $('#registration_form').validate({
        rules: {
            username: {
                required: true,
                maxlength: 10,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            email_con: {
                required: true,
                equalTo: "#email"
            },
            password: {
                required: true,
                minlength: 7
            },
            password_con: {
                required: true,
                equalTo: "#password"
            },
            formCheck: {
                required: true
            },
        }
    });
});

        .error{
          color: red;
          font-Size: 13px;
        }

                                <div class="form-row form-group">
                                    <div class="col-sm-4 col-xl-3 text-center d-xl-flex justify-content-xl-center align-items-xl-center label-column"><label class="col-form-label">Email* :</label></div>
                                    <div class="col-sm-6 input-column"><input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com"></div>
                                </div>

3 ответа

Лучший ответ

$(document).ready(function(){
  $('#registration_form').validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    }
  });
});

label.error{
  color: red;
  font-size: 13px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

<div class="container my-2">
  <div class="row">
    <form class="col-sm-12" action="#" id="registration_form">
      <div class="form-row form-group">
        <div class="col-sm-4 text-sm-right">
          <label class="col-form-label" for="email">Email* :</label>
        </div>
        <div class="col-sm-6">
          <input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com">
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col-sm-6 offset-sm-4">
          <button type="submit" class="btn btn-success">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <p class="h1">Register</p>

  <form class="needs-validation" novalidate>
    <div class="form-group">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email"
             placeholder="E-mail" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        The e-mail is required!
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password"
             placeholder="Password" required minlength="6">
      <div class="valid-feedback">
        Great!
      </div>
      <div class="invalid-feedback">
        The password must contain at least 6 characters!
      </div>
    </div>

    <div class="form-group mt-3">
      <button class="btn btn-primary" type="submit">Register!</button>
    </div>
  </form>
</div>

<script>
  (function() {
    window.addEventListener('load', function() {
      var forms = document.getElementsByClassName('needs-validation');

      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

<div class="container">
<p class="h1">Register</p>

<form class="needs-validation" novalidate>
<div class="form-group">
  <label for="email">E-mail</label>
  <input type="email" class="form-control" id="email"
         placeholder="E-mail" required>
  <div class="valid-feedback">
    Looks good!
  </div>
  <div class="invalid-feedback">
    The e-mail is required!
  </div>
</div>

<div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control" id="password"
         placeholder="Password" required minlength="6">
  <div class="valid-feedback">
    Great!
  </div>
  <div class="invalid-feedback">
    The password must contain at least 6 characters!
  </div>
</div>

<div class="form-group mt-3">
  <button class="btn btn-primary" type="submit">Register!</button>
</div>
</form>
</div>

<script>
(function() {
window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');

  var validation = Array.prototype.filter.call(forms, function(form) {
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);
})();
</script>

В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.

В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p class="text-bold text-dark">
  Какой-то очень интересный текст об интересной вещи. Очень интересно.
</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.text-dark {
  color: #333333;
}

Попробуйте воспроизвести этот пример, и вы увидите, что текст выводится темного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

 {
  color: #333333;
  font-weight: bold;
  font-size: 24px;
}

Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберем на примере. Возьмем параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

<p id="blue" class="red">Какого же цвета будет параграф?</p>

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

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору (#blue)
2. Селектор по классу (.red)
3. Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберем еще один пример:

p {
  color: blue;
  font-weight: bold;
}

.important {
  color: purple;
  font-style: italic;
}

#intro {
  color: green;
}

<p class="important" id="intro">Индейские племена Манахаттоу и Канарси.</p>

Этот текст будет наклонным, жирным и зеленым. И вот почему:

• Селектор по тегу p:
  • Добавит синий цвет
  • Добавит жирное начертание
• Селектор по классу .important:
  • Заменит синий цвет на пурпурный
  • Сделает текст курсивным
• Селектор по идентификатору #intro:
  • Заменит пурпурный цвет на зеленый

После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

 {
  color: green;
  font-weight: bold;
  font-style: italic;
}

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

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере:

.alert {
  color: gray;
}

.alert-error {
  color: red;
}

<p class="alert alert-error">Важное сообщение! Сообщение красного цвета</p>

Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

<p class="alert-error alert">Важное сообщение! Сообщение красного цвета</p>

цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

.alert-error {
  color: red;
}

.alert {
  color: gray;
}

<p class="alert alert-error">Важное сообщение! Сообщение серого цвета</p>

Вес селекторов

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

<textarea class="form-input"></textarea>

.form-input {
  height: 50px;
}

textarea {
  height: 200px;
}

Какой высоты будет элемент <textarea>? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:

.form-input {
  height: 50px;
}

textarea.form-input {
  height: 200px;
}

Теперь для элемента <textarea> будет установлена высота в 200px. Это произошло благодаря тому, что приоритеты «складываются» в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:

1. Первая цифра показывает количество идентификаторов в селекторе
2. Вторая цифра показывает количество классов в селекторе
3. Третья цифра показывает количество тегов в селекторе

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

<textarea class="form-input"></textarea>

.form-input {
  height: 50px;
}

textarea {
  height: 200px;
}

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001

Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:

.form-input {
  height: 50px;
}

textarea.form-input {
  height: 200px;
}

Теперь порядок сил во вселенной немного изменился:

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011

Получаем, что 010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.

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

Самостоятельная работа

Создайте файлы index.html и style.css на своем компьютере.

Внутри HTML расположите следующую запись:

<div id="main" class="text-white alert alert-warning">Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат