Основи роботи з селекторами CSS для новачків, Трепачов Дмитро

Підручник HTML CSS

Просунутий курс

Просунуті речі

У цьому уроці ми з вами навчимося більш просунутої роботи з селекторами CSS.

У попередніх уроках ми з вами використовували лише один тип селекторів - ім'я тега, яким ми зверталися до всіх таких тегів.

Однак найчастіше нам потрібні точніші способи звернення: наприклад, ми хочемо вибрати не всі абзаци, а лише деякі з них.

Способи зробити це ми і вивчатимемо в цьому уроці.

Однак, для початку розберемо два теги, які стануть нам у нагоді надалі.

Блок. Тег div

Тегdivє контейнером для інших тегів. Сам по собі він нічого не робить, проте в нього можна покласти багато різних тегів, наприклад, абзаців і заголовків, а потім для ниходночаснозастосувати різні CSS властивості. Наприклад пофарбуємо вміст тегаdivв червоний колір (використовуючи атрибутstyle):

Так код буде виглядати у браузері:

Lorem ipsum dolor sit amet.

В даний час тегdivє одним із основних будівельних елементів на сайті. Ви ще зіткнетеся з ним надалі багато разів.

Блок. Тег span

Тегspanє контейнером для шматочка тексту. Ви вже знаєте, що для того, щоб зробити, наприклад, жирний текст, слід використовувати тегb. Однак, що робити, якщо я хочу пофарбуватишматок текстуу червоний колір? Для такого випадку тега, подібного до тегуb, не існує.

Для цього і призначений тегspan- сам собою він абсолютно нічого не робить, але для нього можна застосуватиCSS стилі,які дозволять нам додати потрібний ефект до шматка тексту.

Давайте пофарбуємо деякий текст у червоний колір:

Так код буде виглядати у браузері:

Lorem ipsum dolor sit amet.

Ми з вами вивчили два необхідні нам теги і тепер приступаємо до вивчення складнішої роботи з селекторами.

Блок. Угруповання селекторів

Іноді може виникнути така ситуація: вам потрібно зробити те саме з різними тегами, наприклад, пофарбувати всі заголовкиh2,h3іабзацив червоний колір. У цьому випадку вам доведеться написати щось на кшталт такого:

Однак, існує спосіб зробити це трохи коротшим: селектори тегів можна об'єднувати через кому і CSS код застосовується до них всімодночасно. Наведений вище код можна переписати коротше таким чином:

Так код буде виглядати у браузері:

Заголовок h2

Заголовок h3

Абзац з текстом.

Групувати через кому можна будь-яку кількість селекторів тегів, пробіл після коми не має значення, можна без нього, але з ним код красивіший.

Блок. Вкладеність тегів один в одного

Уявімо тепер ситуацію, коли ми хочемо звернутися тільки до тих тегівi, які знаходятьсявсередині абзаців, і не хочемо чіпати ті тегиi, які знаходятьсявсередині заголовків h2.

Це робиться за допомогою так званогоконтекстного селектора, який дозволяє звертатися до тегів за їх вкладеністю в інші теги.

Щоб показати вкладеність, між селекторами слід поставитипробіл(цей пробіл і є символом контекстного селектора).

Наприклад, так -p i- ми звернемося до всіх тегівi, що знаходяться всередині p,p b- так до всіх тегівbвсерединіp, а так -div p b- до всіх тегівb, які знаходяться всередині абзаців p, які у свою чергу знаходяться всередині тега div.

У наступному прикладі ми звернемося до всіх абзаців усередині div та пофарбуємо їх у червоний колір. Абзаци поза дивом та інші елементи всередині дива (у нашому випадкуh2) червоними не стануть:

Так код буде виглядати у браузері:

Заголовок h2 всередині тега div.

Абзац всередині тега div.

Абзац поза тега div.

Блок. Вибір елемента за унікальним ID

Наступний спосіб може вам знадобиться в такій ситуації: вам необхідно для всіх абзаців поставити червоний колір, а конкретно для цього абзацу - зелений. В цьому випадку, як ви вже знаєте, можна скористатися атрибутомstyle, проте цей спосіб не найоптимальніший (він захаращує HTML код CSS кодом).

Другий спосіб полягає в тому, що потрібному елементу даєтьсяатрибут id, який містить у собіунікальне ім'янашого тега (іншого id з таким ім'ям на сторінці не повинно бути - буде конфлікт (6)). Якщо ми дамо йому, наприклад, ім'яtest, тоді в CSS ми зможемо звернутися до нього таким чином:#test- тобто спочатку пишеться символ"решітка", а потім - теім'я, яке ми записали в атрибутid.

Давайте зараз для всіх абзаців поставимо червоний колір, а для абзацу з - зелений:

Так код буде виглядати у браузері:

Абзац із атрибутом id у значенні "test".

Звичайний абзац з текстом.

А тепер атрибутidдамоконкретному дивуі пофарбуємо вміст цього дива в червоний колір, звернувшись до нього за йогоid:

Так код буде виглядати у браузері:

Заголовок h2всередині # Test.

Заголовок h2 всередині # Test.

Абзац всередині # Test.

А тепер суміснийконтекстний селектор(який пробіл, що показує вкладеність) іidі зробимо так, щобтільки абзаци(але не заголовкиh2в даному випадку) з#testстали червоного кольору:

Так код буде виглядати у браузері:

Заголовок h2 всередині # Test.

Абзац всередині # Test.

Блок. Класи елементів

Звернення до елемента за йогоidмає деяку нестачу - так ми можемо звернутися лише до одного елемента на сторінці. А що робити, якщо нам, наприклад, потрібні абзаци двох типів – червоні та зелені і вони можуть чергуватись у довільному порядку? В цьому випадку набагато зручніше буде скористатисякласами.

Класизадаються за допомогоюатрибута class, в якому ми пишемо ім'я класу. Їх перевага в тому, що один і той же клас може бути у багатьох елементів на сторінці. Тобто, якщо елементи повинні поводитися однаково - ми даємо їм той самий клас.

Як звернутися до елементів з певним класомCSS: нехай ми задали потрібним нам елементам клас з ім'ямtest, тоді вCSSдо всіх елементів з цим класом ми можемо звернутися так -.test- спочатку символ"точка"і потімім'я класуз атрибутуclass.

У прикладі нижче і абзаци, і заголовки мають той самий класtest, який фарбує ці елементи в червоний колір:

Так код буде виглядати у браузері:

Заголовок h2 з класом test.

Абзац із класом test.

Абзац без класу.

Блок. Певний тег із заданим класом

Бувають такі ситуації, коли різні теги мають один і той самий клас. Наприклад, у абзаців та заголовків h2 одночасно заданий класtest. Вам може знадобитися вибратитільки абзациз класомtest, не торкаючись заголовківh2з цим же класом.

У цьому випадку замість селектора.testя повинен написати наступне:p.test- таким чином я виберу всі абзаци з класомtest, не торкнувшись заголовки. Якщо ж я напишуh2.test- то виберу всі заголовки h2 з класомtest, не торкнувшись абзаців.

У наступному прикладі тільки абзаци з класомtestстануть червоного кольору, а заголовки з таким самим класом - не стануть:

Так код буде виглядати у браузері:

Заголовок h2 з класом test.

Абзац із класом test.

Абзац без класу.

Отже, ще раз:p.test- такий селектор вибирає абзаци з класом test . А ось якщо я зроблю так:p. . Відчуйте цю різницю.

Давайте тепер оберемотільки h2з класомtest:

Так код буде виглядати у браузері:

Заголовок h2 з класом test.

Абзац із класом test.

Абзац без класу.

А зараз зробимо так, щоб класtestзадавав курсив усім елементам, яким він дано, і щоб при цьому всі заголовкиh2з класомtestфарбувалися в червоний колір, а абзаци з цим класом – у зелений:

Так код буде виглядати у браузері:

Заголовок h2 з класом test.

Абзац із класом test.

Абзац без класу.

Блок. Відео

Що вам робити далі:

Починайте розв'язання задач за наступним посиланням: завдання до уроку.

Коли все вирішите – переходьте до вивчення нової теми.