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

Почему и как следует использовать псевдоклассы и псевдоэлементы в CSS

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

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

Псевдоэлементы

Это элементы, которые могут быть добавлены к элементу HTML для придания ему дополнительного стиля или функциональности.

Они называются "псевдо", потому что не являются реальными элементами HTML, а "моделируются" с помощью специального синтаксиса в CSS.

Здесь вы можете узнать все о псевдоэлементах.

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

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

Здесь вы можете узнать все о псевдоклассах.

Зачем использовать псевдоэлементы и псевдоклассы?

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

Вот несколько причин, по которым вы должны использовать псевдоэлементы и псевдоклассы в своих проектах:

• Они позволяют добавлять стили к определенным частям HTML-элемента, например, к первому или последнему абзацу div, первому или последнему дочернему элементу элемента. Это может быть полезно для придания отличительного стиля определенным элементам вашей страницы.
• Позволяют добавлять дополнительные элементы: Псевдоэлементы позволяют добавлять на страницу дополнительные элементы, например, маркер пользовательского списка или разделительную линию. Это позволяет расширить возможности дизайна вашей страницы.
• Вы избегаете увеличения сложности HTML: Используя псевдоэлементы, вам не придется добавлять новые элементы в HTML вашей страницы. Это позволяет сохранить HTML более чистым и простым, что облегчает сопровождение и отладку страницы.
• Используя псевдоклассы CSS в сочетании с медиа-запросами, вы можете создавать компоненты React с адаптивными стилями и динамическим поведением, которые можно легко использовать повторно (с помощью инструментария с открытым исходным кодом, такого как Bit ) для удовлетворения потребностей различных проектов и пользователей.
• Используя псевдоклассы CSS и медиа-запросы, вы можете создавать модульные, отзывчивые компоненты для более последовательного и многократного использования пользовательского опыта на разных устройствах и в разных контекстах. Затем вы можете использовать такие инструменты, как Bit для извлечения этих компонентов, их версионирования и использования в любом другом проекте с помощью простой установки npm.

Наиболее используемые псевдоклассы в CSS

• :active Применяется к элементу, когда пользователь нажимает на него кнопку мыши или палец.

<ul>
  <li><a href = "#">Home</a></li>
  <li><a href = "#">About Us</a></li>
  <li><a href = "#">Contact Us</a></li>
</ul>

nav a:active {
  background-color: #6a82fb;
}

• :hover Применяется к элементу, когда пользователь наводит на него курсор мыши.

<ul>
  <li><a href = "#">Home</a></li>
  <li><a href = "#">About Us</a></li>
  <li><a href = "#">Contact Us</a></li>
</ul>

nav a:hover {
   color: #333;
   background-color: #fc5c7d;
 }

• :focus Он применяется к элементу, когда он имеет фокус, то есть когда пользователь взаимодействует с ним с помощью клавиатуры.

<input type = "email" id = "email" required placeholder = "Email" />

input:focus {
   background-color: #111;
 }

• :visited Применяется к посещенной ссылке.

<footer>
   <ul>
    <li><a href = "/" class = "link">Link 1</a></li>
    <li><a href = "#" class = "link">Link 2</a></li>
    <li><a href = "/" class = "link">Link 3</a></li>
   </ul>
  </footer>

footer .link:visited {
  color: #444;
}

• :first-child и :last-child Применяется к первому и последнему дочернему элементу определенного элемента соответственно.

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li>
</ol>

ol li:first-child {
  font-weight: bold;
}

ol li:last-child {
  text-decoration: underline;
}

• :not(selector) Применяется ко всем элементам, которые не соответствуют указанному селектору.

<footer>
  <ul>
    <li><a href = "/" class = "link">Link 1</a></li>
    <li><a href = "#" class = "link">Link 2</a></li>
    <li><a href = "/" class = "link">Link 3</a></li>
  </ul>
</footer>

footer ul li:not(:nth-child(3)) {
  font-weight: normal;
 }

• :enabled и :disabled Применяется к элементу типа ввода, который включен, и к элементу, который отключен, соответственно.

<form>
  <button type = "submit" disabled>Subscribe</button>h
</form>

<form>
  <button type = "submit" enabled>Subscribe</button>h
</form>

form button:enabled {
  background-color: #6a82fb;
  color: white;
  padding: 10px 20px;
  border: none;
}

form button:disabled {
  background-color: #ccc;
  color: #666;
  padding: 10px 20px;
  border: none;
}

• :checked Применяется к выбранному элементу формы.

<form>
  <div id = "radio-group">
  <input type = "radio" class = "radio" id = "radio1" />
  <label for = "radio1">I agree</label>

  <input type = "radio" class = "radio" id = "radio2" />
  <label for = "radio2">I desagree</label>
  </div>
</form>

.radio:checked {
  accent-color: #6a82fb;
 }

• :valid и :invalid Применяется к элементу типа ввода, когда введенное значение является действительным или недействительным соответственно.

<form>
  <input type = "email" id = "email" required placeholder = "Email" />
</form>

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

Наиболее используемые псевдоэлементы в CSS

• :before и :after для вставки содержимого до и после элемента соответственно.

<section id = "about-us">
   <h2>About Us</h2>
<section>

<section id = "services">
   <h2>Services</h2>
</section>

#about-us h2::before {
  content: "😀";
}

#services h2::after {
  content: "👀";
}

2 - ::backdrop Применяет стили к фону за определенным элементом для придания ему большей важности или акцентирования внимания.

<dialog>
  <h2>I'm an open dialog window</h2>
  <p>Check out my backdrop :)</p>
  <button class = "btn" onclick = "closeDialog()">Close</button>
</dialog>

dialog::backdrop {
  background-color: rgba(106, 130, 251, 0.4);
}

3 - ::first-letter Применяет стили к первой букве абзаца.

<section id = "about-us">
  <h2>About Us</h2>
  <p>
    We are a company dedicated to providing high quality products and services to our customers. We have been in
    business for over 10 years and have a reputation for excellent customer service and satisfaction.
  </p>
</section>

#about-us p::first-letter {
  font-size: 150%;
  color: #6a82fb;
}

4 - ::placeholder Применяет стили к временному тексту в элементе ввода.

<form>
  <input type = "email" id = "email" required placeholder = "Email" />
</form>

input#email::placeholder {
  color: #fc5c7d;
}

5 - ::marker Применяет стили к маркерам элемента списка.

<section id = "about-us">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
   </ul>
  </section>

#about-us ul li::marker {
  color: #6a82fb;
  font-size: 1.5em;
}

Собираем все воедино

Заключение

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

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

Читать далее:

Добавление художественных эффектов к изображениям с помощью React и свойства CSS Filter

Создавайте приложения с помощью многоразовых компонентов, как в Lego

Bit - инструмент с открытым исходным кодом, который помогает 250 000+ разработчикам создавать приложения с помощью компонентов.

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

→ Узнать больше

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

→ Микро-фронтэнды

→ Система проектирования

→ Совместное использование кода и повторное использование

→ Monorepo

Узнать больше

• Как мы создаем микрофронтенды
• Как мы создаем систему проектирования компонентов
• Как повторно использовать компоненты React в своих проектах
• 5 способов построить React Monorepo
• Как создать композитное React-приложение с помощью Bit