Вступ до типів CSS-селекторів
Типи селекторів CSS використовуються для вибору вмісту, який ми хочемо стилізувати. Це допомагає у виборі елементів на основі класу, ідентифікатора, типу тощо. Селектор CSS - це компонент рулету CSS.
Типи селекторів CSS
У нас доступно 5 різновидів CSS селекторів. Ми розглянемо такі важливі селектори CSS:
- Універсальний селектор CSS.
- Вибір елемента CSS.
- Вибір ідентифікатора CSS
- Вибір класів CSS.
- Вибір атрибутів CSS
1. Універсальний селектор CSS
На HTML-сторінці вміст залежить від тегів HTML. Пара тегів визначає конкретний елемент веб-сторінки. Універсальний селектор CSS вибирає всі елементи на веб-сторінці.
Приклад:
* (
color: blue;
font-size: 21px;
)
Ці два рядки коду, оточені фігурними дужками, впливатимуть на всі елементи, присутні на сторінці HTML. Ми оголошуємо універсальний селектор за допомогою зірочки на початку фігурної дужки. Універсальний селектор можна використовувати разом з іншими селекторами у комбінації.
2. Селектор елементів CSS
Селектор елементів CSS також відомий як селектор типу. Елемент вибору елементів у CSS намагається зіставити елементи HTML, що мають однакове ім'я. Тому селектор з
- відповідає всім
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Шпаргалка CSS3
- Запитання щодо інтерв'ю CSS
- SASS проти SCSS
- Питання для інтерв'ю SASS
- Приклади списку упорядкованих HTML
- елементи, тобто всі не упорядковані списки на цій сторінці HTML.
Розглянемо приклад для вибору елемента.
ul (
border: solid 1px #ccc;
)
Щоб зрозуміти це краще, давайте подивимось на приклад HTML-коду для застосування CSS-коду, про який ми писали вище.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Демонстраційний текст
У цьому прикладі ми знайдемо переважно три елементи, а саме:
- елемент, тег та інше
- елемент. Оскільки наш код CSS застосовується до
- тег конкретно, зміни в кордоні будуть зроблені лише для наших
- теги, а не для тегів. Зазвичай ці зміни не стосуються вмісту
- теги також, але в деяких сценаріях стилі можуть застосовуватися до внутрішніх елементів.
3. CSS-селектор
Селектор CSS ID допомагає розробнику співставити ідентифікатор, створений розробником, до вмісту стилю. Вибір ідентифікатора використовується за допомогою знаку хеша (#) перед іменем ідентифікатора, оголошеним розробником. Селектор ідентифікаторів відповідає кожному HTML-елементу, який має атрибут ID зі значенням, таким же, як і у селектора, без хеш-знаку.
Ось приклад:
#box (
width: 90px;
margin: 10px;
)
Цей CSS-код можна використовувати для відповідності елементу, що має ідентифікатор 'box', як у наступному реченні.
Тут тег - лише приклад. Ми можемо написати атрибут ID для будь-якого тегу HTML. Селектор ідентифікаторів відповідає атрибуту ID всередині елемента та шукає його стилізацію. У нашому прикладі стилізація застосовується до тих пір, поки будь-який елемент містить атрибут ID "box".
Значення використовуваного ідентифікатора повинно бути унікальним. Якщо один і той же ідентифікатор використовується для двох або більше елементів, код технічно є недійсним, але стилізація елемента все-таки застосовуватиметься, тому, як правило, уникає однакового ідентифікатора.
Доводиться використовувати щоразу інший ідентифікатор для кожної HTML-сторінки, є досить жорсткою. Крім проблем із жорсткістю, селектори ID в CSS також стикаються з проблемою конкретності.
4. Вибір класів CSS
Селектор класів CSS - один із найкорисніших селекторів усіх селекторів. Він оголошується за допомогою крапки, за якою слідує назва класу. Ім'я цього класу визначається кодером, як і у випадку з селектором ідентифікаторів. Селектор класів шукає кожен елемент, який має значення атрибута з тим самим іменем, що і ім’я класу, без крапки.
Приклад:
.square (
margin: 20px;
width: 20px;
)
Цей CSS-код можна використовувати для відповідності елементу, що має клас 'квадрат, як у наступному реченні.
Цей стиль також застосовується до всіх інших елементів HTML, які мають значення атрибуту для класу як «квадрат». Елемент, що має однакове значення атрибута класу, допомагає нам у повторному використанні стилів і уникає зайвого повторення. Крім того, селектор класів є вигідним, оскільки дозволяє нам додати кілька класів до певного елемента. Ми можемо додати до атрибуту більше одного класу, розділивши кожен клас з пробілом.
Приклад:
Тут квадрат, жирний шрифт та форма - це три класи різних класів.
5. Селектор атрибутів CSS
Селектор CSS Attribute стилює вміст відповідно до атрибута та значення атрибута, зазначеного в квадратних дужках. Перед квадратним кронштейном, що відкривається, немає пробілів.
input(type="text") (
background-color: #fff;
width: 100px;
)
Цей код CSS відповідатиме наступному HTML-елементу.
Аналогічно, якщо значення атрибута 'type' змінюється, селектор Attribute не буде відповідати йому. Наприклад, селектор не відповідає атрибуту, якщо значення "type" змінилося з "text" на "submit". Якщо селектор атрибутів оголошено лише атрибутом, а не значенням атрибута, він відповідатиме всім елементам HTML з атрибутом 'type', незалежно від того, є значення 'text' або 'submit'.
Приклад:
input(type) (
background-color: #fff;
width: 100px;
)
Ми також можемо використовувати селектори атрибутів без конкретизації значення поза квадратними дужками. Це допоможе нам орієнтуватися лише на атрибут, незалежно від елемента. У нашому прикладі вона буде націлена на основі атрибута 'type', незалежно від елемента 'input'. CSS Selectors допомагають нам спростити наш код і дозволяють використовувати та використовувати один і той же CSS-код для різних елементів HTML. Вони допомагають нам у створенні певних сегментів та частин нашої веб-сторінки. Вони надають нам можливість рівномірно стилізувати подібні елементи на нашій веб-сторінці. Таким чином, вибір CSS є важливою частиною кривої навчання CSS.
Рекомендовані статті
Це був посібник щодо Типи селекторів CSS. Тут ми з прикладом обговорили різні типи CSS-селекторів. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -