Що таке селектори атрибути CSS. Css атрибути селектори. За підрядком у значенні атрибуту
У CSS багато селекторів. Деякі з них дозволяють вибрати певні елементи, не прив'язуючи до них стильовий клас чи ідентифікатор. Наприклад, css селектори атрибутів.
Як вибрати елемент за його html-атрибутом
Селектори атрибутів, це селектори, у яких у квадратних дужках записується атрибут, чи атрибут зі значенням. Відразу наведу кілька прикладів, щоб було зрозуміло:
* - Вибирає всі елементи, які мають атрибут href з будь-яким значенням.
input – вибирає всі input-елементи, які мають атрибут disable (всі відключені поля).
input – вибирає всі поля, тип яких password , тобто поля для введення пароля.
img – вибирає картинку, яка має атрибут src = “logo.png” .
Як бачите, прописувати css селектори атрибутів не так вже й складно. Їхня найголовніша відмінність – квадратні дужки, в яких записується або просто атрибут, або атрибут з його точним значенням. Але на цьому функціонал цих селекторів не закінчується.
Просунуті css селектори атрибутів
Усі нижчеперелічені селектори чутливі до регістру.
Пошук на початку рядка
div – вибирає всі div-и, які мають стильовий клас, що починається на “block” . Таким чином, будуть обрані, наприклад, такі блоки: "block-head", "block-3", "blocknote". Головне, щоб на початку значення було ключове слово.
Пошук у кінці рядка
A – вибирає всі посилання, у яких адреса закінчується на rar. Таким чином, якщо у вас на сайті можна завантажити щось, то ви можете додати іконку поряд з усіма посиланнями на архівні файли.
Пошук підрядки скрізь у значенні
span – вибере всі теги span, у яких у імені класу будь-де цього імені міститься “art”. Таким чином, будуть обрані, наприклад, спани із такими класами: party, clart, art-1.
Пошук префіксів
p - вибере абзаци зі стильовим класом, які мають ім'я, або точно збігається з "first", або містять префікс first-, з якого починається ім'я класу.
Пошук слів усередині значення
input– вибере всі елементи input, у яких значення атрибута ідентифікатора містить у собі слово text . Його відмінність від пошуку підрядки скрізь відрізняється тим, що входити має саме слово, а не підрядок.
Останні два варіанти рідко де застосовуються і навряд чи вам знадобляться, але для загального розвитку все-таки можна про них знати.
Для чого можуть стати в нагоді селектори атрибутів
За допомогою подібних селекторів можна вибирати багато html-елементів, не задаючи їм стильових класів. У деяких випадках завдяки такому способу можна скоротити код та спростити собі роботу. Наприклад, вище я наводив приклад із іконкою для архівів. Тут виникла ще одна ідея. Наприклад, на своєму сайті ви часто посилаєтеся на один інший ресурс (вікіпедію, скажімо) і хочете поруч із посиланнями на вікіпедію відображати спеціальну іконку, якої інші посилання не мають.
Реалізувати це можна так:
A (css-правила)
Насправді способів застосування селекторів атрибутів можна вигадати ще багато. Вони можуть певною мірою спростити роботу там, де це потрібно. Використовуйте css та підписуйтесь на блог, щоб дізнатися більше про веб-розробку.
Іноді буває необхідно, звернутися до будь-якого елемента сторінки, у якого не прописано class або ID, не маючи можливості додати class або ID до html. CSS Звернутися до будь-якого елемента за атрибутами – ось вихід із ситуації.
Часто такі ситуації складаються, коли html кодгенерується зовнішнім підключаємо script, і не може бути змінений вами. Але при цьому його необхідно стилізувати, або змінити вигляд CSS.
Отже, є така штука, як селектори по атрибутам html. З цією допомогою можна на CSS звернутися до будь-якого елемента за атрибутами. Атрибути – це атрибути тегів html, які src, href, data-*, title, name, rel, alt та інших.
У CSS можна прописувати селектор, у якому буде повне чи часткове відповідність значення певного атрибута.
Розглянемо приклади: CSS Звернутися до будь-якого елемента за атрибутами
Наприклад, якщо у нас є піксельна іконка, яку генерує код PayPal, та на мобільної версіїїї треба приховати (бо сильно заважає). Тоді досить просто можна це зробити, на чистому CSS:
Або, наприклад, потрібно приховати всі елементи з title, який починається на "Надіслано". Так і зробимо:
Усього є кілька таких селекторів:
- – всі елементи, які мають такий атрибут
- – всі елементи, у яких атрибут точно = значенням
- – всі елементи, у яких атрибут містить значення (має бути ціле слово)
- – всі елементи, у яких атрибут починається значенням (має бути ціле слово)
- - всі елементи, у яких атрибут починається значенням (може бути не ціле слово
- – всі елементи, у яких атрибут закінчується значенням (може бути ціле слово)
- – всі елементи, у яких атрибут містить значення (може бути набір символів, а чи не ціле слово)
Відповідає всім елементам із атрибутом attributeрівним value. Якщо valueскладається з кількох слів, між якими є прогалини, потрібно укладати valueв лапки. Якщо valueне містить прогалин - лапки не обов'язкові.
Приклади використання:
Зауваження 1: Незважаючи на те, що за допомогою селектора можна знаходити елементи за атрибутами class або id, правильнішим буде використовувати спеціальні селектори за класом та ідентифікатором . Це стосується багатьох атрибутів в елементах форм, для яких існують окремі селектори.
Зауваження 2: У всіх версіях jQuery, починаючи з 1.2, використання символу "@" перед атрибутом не потрібне.
В дії
Всі елементи, які мають підказку (атрибут title) з текстом "Не влізай - уб'є" будуть пофарбовані в жовтий колір із червоними рамками:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ div, span ( display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; background-color: #eee; font -size: 20pt; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div title="Не влази - уб'є"~gt~ 1 ~lt~/div~gt~ ~lt~div title="А тут безпечно"~gt~ 2 ~lt~/div~gt~ ~lt~span title="Не влазь - вб'є"~gt~ 3 ~lt~/span~gt~ ~lt~script~gt~ $("") .css({"border":"3px solid red", "background-color": "#ffcc00"}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}
Влад Мержевич
Багато тегів відрізняються за своєю дією залежно від того, які в них використовуються атрибути. Наприклад, тег може створювати кнопку, текстове поле та інші елементи форми лише рахунок зміни значення атрибута type . При цьому додавання правил стилю до селектора INPUT застосує стиль одночасно до всіх створених за допомогою цього тега елементів. Щоб гнучко керувати стилем подібних елементів, CSS введені селектори атрибутів. Вони дозволяють встановити стиль за наявністю певного атрибута тега або його значення.
Розглянемо кілька типових варіантів застосування таких селекторів.
Простий селектор атрибуту
Встановлює стиль елемента, якщо встановлено специфічний атрибут тега. Його значення в даному випадку не має значення. Синтаксис застосування такого селектора є наступним.
[атрибут] ( Опис правил стилю )
Селектор [атрибут] ( Опис правил стилю)
Стиль застосовується до тих тегів, усередині яких додано зазначений атрибут. Пробіл між ім'ям селектора та квадратними дужкамине допускається.
У прикладі 13.1 показано зміну стилю тега , у тому випадку, якщо до нього додано атрибут title .
Приклад 13.1. Вид елемента залежно від його атрибуту
HTML5 CSS 2.1 IE Cr Op Sa Fx
Продовжуючи відомий закон Мерфі, який свідчить: Якщо неприємність може статися, вона обов'язково станеться
, можемо запровадити своє спостереження: Після того, як веб-сторінка коректно відображатиметься в одному браузері, з'ясується, що вона неправильно відображається в іншому
.
Результат прикладу показано на рис. 13.1.
Мал. 13.1. Зміна стилю елемента в залежності від застосування атрибуту title
У даному прикладізмінюється колір тексту всередині контейнера коли до нього додається title . Зверніть увагу, що для селектора Q не потрібно повторювати стильові властивості, оскільки вони успадковуються від селектора Q .
Атрибут зі значенням
Встановлює стиль елемента в тому випадку, якщо встановлено певне значення специфічного атрибута. Синтаксис застосування наступний.
[атрибут="значення"] ( Опис правил стилю )
Селектор[атрибут="значення"] ( Опис правил стилю )
У першому випадку стиль застосовується до всіх тегів, які містять вказане значення. А у другому — лише до певних селекторів.
У прикладі 13.2 показано зміну стилю посилання, якщо тег містить атрибут target зі значенням _blank. При цьому посилання буде відкриватись у новому вікні і щоб показати це, за допомогою стилів додаємо невеликий малюнок перед текстом посилання.
Приклад 13.2. Стиль для відкриття посилань у новому вікні
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат прикладу наведено нижче (рис. 13.2).
Мал. 13.2. Зміна стилю елемента в залежності від значення target
У цьому прикладі малюнок до посилання додається за допомогою властивості background. У його функції входить створення фонової картинки, що повторюється, але повторення фону можна скасувати через значення no-repeat , що в результаті дасть єдине зображення.
Значення атрибуту починається з певного тексту
Встановлює стиль елемента в тому випадку, якщо значення атрибута тега починається з вказаного тексту. Синтаксис застосування наступний.
[атрибут^="значення"] ( Опис правил стилю )
Селектор[атрибут^="значення"] ( Опис правил стилю )
У першому випадку стиль застосовується до всіх елементів, які мають значення атрибута починаються з вказаного тексту. А у другому — лише до певних селекторів. Використання лапок не є обов'язковим, але тільки якщо значення містить латинські літери і без пробілів.
Припустимо, що на сайті потрібно розділити стиль звичайних та зовнішніх посилань - посилання, які ведуть на інші сайти. Щоб не вводити у тег новий клас, скористаємося селекторами атрибутів. Зовнішні посилання характеризуються додаванням до адреси протоколу, наприклад для доступу до гіпертекстових документів використовується протокол HTTP. Тому зовнішні посилання починаються з ключового слова http:// його і додаємо до селектора A , як показано в прикладі 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}
Мал. 13.3. Зміна стилю для зовнішніх посилань
Значення атрибута закінчується певним текстом
Встановлює стиль елемента в тому випадку, якщо значення атрибута закінчується вказаним текстом. Синтаксис застосування наступний.
[атрибут$="значення"] ( Опис правил стилю )
Селектор[атрибут$="значення"] ( Опис правил стилю )
У першому випадку стиль застосовується до всіх елементів, у яких значення атрибута завершується заданим текстом. А у другому — лише до певних селекторів.
У такий спосіб можна автоматично розділяти стиль для посилань на сайти домену ru та для посилань на сайти інших доменів на зразок com, як показано в прикладі 13.4.
Приклад 13.4. Стиль для різних доменів
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
У цьому прикладі містяться два посилання, які ведуть різні домени — com і ru. При цьому до кожного такого посилання за допомогою стилів додається своя фонова картинка (рис. 13.4). Стилеві властивості будуть застосовуватися тільки для посилань, атрибут href яких закінчується на «.ru» або «.com». Зауважте, що додавши до імені домену слеш (http://www.yandex.ru/) або адресу сторінки (http://www.yandex.ru/fun.html), ми змінимо цим закінчення і стиль застосовуватися вже не буде . В цьому випадку краще скористатися селектором, у якого заданий текст зустрічається у будь-якому місці значення атрибута.
Значення атрибуту містить вказаний текст
Можливі варіанти, коли стиль слід застосувати до тега з певним атрибутом, частиною його значення є певний текст. При цьому точно не відомо, де значення включений цей текст - на початку, середині або наприкінці. У цьому випадку слід використовувати такий синтаксис.
[атрибут*="значення"] ( Опис правил стилю )
Селектор[атрибут*="значення"] ( Опис правил стилю )
У прикладі 13.5 показано зміну стилю посилань, в атрибуті href яких є слово «htmlbook».
Приклад 13.5. Стиль для різних сайтів
HTML5 CSS 2.1 IE Cr Op Sa Fx
Крок за кроком Графіка для Інтернет
Результат цього прикладу показано на рис. 13.5.
Мал. 13.5. Зміна стилю для посилань на адресу яких зустрічається «htmlbook»
Одне з кількох значень атрибуту
Деякі значення атрибутів можуть перераховуватись через пробіл, наприклад, імена класів. Для встановлення стилю за наявності у списку необхідного значення застосовується наступний синтаксис.
[атрибут~="значення"] ( Опис правил стилю )
Селектор[атрибут~="значення"] ( Опис правил стилю )
Стиль застосовується в тому випадку, якщо атрибут має вказане значення або воно входить до списку значень, що розділяються пробілом (приклад 13.6).
Приклад 13.6. Стиль залежно від імені класу
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Заголовок
У цьому прикладі зелений колір тексту застосовується до селектора H3, якщо ім'я класу у шару задано як block. Зазначимо, що аналогічний результат можна отримати, якщо використовувати конструкцію *= замість ~=.
Дефіс у значенні атрибуту
У іменах ідентифікаторів і класів можна використовувати символ дефісу (-), що дозволяє створювати значні значення атрибутів id і class . Для зміни стилю елементів, у значенні яких застосовується дефіс, слід скористатися наступним синтаксисом.
[атрибут|="значення"] ( Опис правил стилю )
Селектор[атрибут|="значення"] ( Опис правил стилю )
Стиль застосовується до елементів, у яких атрибут починається із зазначеного значення або фрагмента значення, після якого йде дефіс (приклад 13.7).
Приклад 13.7. Дефіси у значеннях
HTML5 CSS 2.1 IE Cr Op Sa Fx
У цьому прикладі ім'я класу задано як block-menu-therm , у стилях використовується конструкція |="block" , оскільки значення починається саме з цього й у значенні зустрічаються дефіси.
Всі ці методи можна комбінувати між собою, визначаючи стиль для елементів, які містять два і більше атрибути. У таких випадках квадратні дужки йдуть поспіль.
[атрибут1="значення1"][атрибут2="значення2"] ( Опис правил стилю )
Селектор[атрибут1="значення1"][атрибут2="значення2"] ( Опис правил стилю )
Запитання для перевірки
1. Потрібно встановити колір тла біля текстового поля. Який стиль для цього підійде?
- INPUT (background: #acdacc; )
- INPUT (background: #acdacc; )
- INPUT (background: #acdacc; )
- INPUT (background: #acdacc; )
- INPUT (background: #acdacc; )
2. Який стиль потрібно використовувати, щоб змінити колір тексту лише у другого абзацу?
Перший абзац
Другий абзац
Третій абзац
- P ( color: red; )
- P ( color: red; )
- P ( color: red; )
- P ( color: red; )
- P ( color: red; )
3. До якого елемента буде застосовуватись наступний стиль?
( background: # 666; )
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Відповіді
1. INPUT (background: #acdacc; )
2. P ( color: red; )
3.
Практично всі верстальники знають про існування селекторів атрибутів css і хоч раз так зустрічали у себе в коді конструкції з розряду input, але лише обрані одиниці знають, що насправді їх існує 7 різновидів, кожен з яких відкриває досить широкі можливості для відбору тегів з коду нашої сторінки.
Опис селектора атрибутів CSS
основна ціль- відбір тегів з html коду сторінки за певним атрибутом, групою атрибутів або їх значенням.
Синтаксис- Квадратні дужки всередині яких знаходиться назва атрибута.
Класифікація та використання селекторів атрибутів
Наявність атрибута
[title] (text-decoration: underline;)
Дозволяє відібрати всі елементи, у яких заданий атрибут з певною назвою. У нашому прикладі всі теги, у яких прописаний title, стануть підкресленими.
За точним значенням атрибута
input[ type= "submit" ] ( background-color: green; )
Мабуть різновид даного атрибуту, що найчастіше зустрічається. Задає точну відповідність. Будуть обрані лише ті input, у яких атрибут type заданий submit.
За частковим значенням атрибуту
p[ class ~= "useful" ] ( color: red; )
Дозволяє відібрати елементи, серед заданих значень яких є наше. Для кращого розуміння поясню на прикладі: всі p у яких серед заданих класів зустрічається useful попадуть під даний селектор. (“useful superText”- потрапить, “useful”- потрапить, “superText”- не потрапить).
Селектор класів по суті є окремим випадком даного селектора атрибутів.
За конкретними значеннями атрибутів
[ lang | = "en"] ( font- style: italic; )
Відбір за атрибутом значення якого дорівнює значенню селектора або містить у собі дане значення з дефісом, що йде після нього.
Щоб краще зрозуміти скажу, що з прикладу елементи з lang="en", lang="en-us", lang="en-au" будуть обрані, а з lang="ru", lang="english" немає.
На початку значення атрибута
[ alt^= "pony" ] ( margin- bottom: 20px; )
Відбере атрибути значення яких починається із заданого нами. Пояснення: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – будуть обрані, alt=”I want pony” – не буде обрано.
Після закінчення значення атрибуту
У цілому нині принцип дії аналогічний попередньому атрибуту, але цього разу значення має бути наприкінці атрибута.
img[ src$= ".png" ] ( width: 150px; )
У прикладі буде вибрано всі зображення, що посилаються на файли.png.
За підрядком у значенні атрибуту
Логічним після двох попередніх буде селектор, який вибирає елементи, в яких зустрічається цікаве нам значення незалежно від його розташування всередині атрибута.
a[ href*= "сайт" ] ( font- size: 120 %; )
Виберуться всі елементи, що включають цікаву нам підрядок..ru” вже немає. з 5 )