😎 » CSS3 » Селекторы в css3
776 0  

Селекторы в css3

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

апра


Селектор Пример Описание примера
.class .test Выбирает все элементы с классом test(class = "test").
#id #test Выбирает все элементы с id ="test".
* * Выбирает все элементы (универсальный селектор). Селектор также может выбрать все элементы внутри другого элемента.
element h2 Выбирает все заголовки второго уровня - <h2>.
selector,selector h2, h3 Выбирает все элементы <h2>и <h3>.
selector selector h2 i Выбирает все элементы <i>внутри элементов <h2>.
selector > selector p > a Выбирает все дочерние элементы <a>, у которых родитель - элемент <p>.
selector + selector h2 + p Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>.
selector ~ selector h2 ~ p Выбирает все элементы <p>, которые следуют сразу же за элементом <h2>, а также все элементы <p>, которые находятся на одном уровне вложенности.
[attribute] [title] Выбирает все элементы с атрибутом title.
[attribute = value] [type=password] Выбирает все элементы которое точно содержит"password"
[attribute=value][attribute2=value2] [src='logo.png'][alt='image'] Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и imageдля второго.
[attribute ~ = value] [title~= home] Выбирает все элементы с атрибутом title,  разделённых пробелами, одно из которых в точности равно"home".
[attribute|= value] [title|= home] Выбор всех элементов с атрибутом title, значение которого начинается или точно равно с "home".
[attribute^=value>] a[href^='http://website']

Починається на вказаний адрес.

Вибере цей елемент:

<a href='http://website.com'>

А цей НЕ вибере:

<a href='http://mywebsite.com'>
[attribute$=value] img[src$='.png']

Закінчується на вказаний формат.

Вибере цей елемент:

<img src='photo.png' />

А цей НЕ вибере:

<img src='snapshot.jpg' />
[attribute*=value] a[href*='google']

Все де зустрічається данні символи.

Вибере цей елемент:

<a href='http://google.com'>

А цей НЕ вибере:

<a href='http://gmail.com'>
[attribute*=value] [class*='bg-'] Выбор всех элементов с класом который содержит (bg-)
[attribute*=value] [id*='bg-'] Выбор всех элементовс ID который содержит (bg-)
input[type=submit]:disabled {
    background-color: #4a4a4a;
}​

Выбор неактивного инпута типа submit
p.class1[title='Назва спливаючої підказки'] Вибере елемент р з класом "class1" і тітлом що співпадає

crying

~  - набор слов разделённых пробелами, одно из которых в точности равно

^ - начинается

$ - заканчивается

| - в точности равно или начинаться с



Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023