» » » Селектори css. Приклади використання

Селектори css. Приклади використання

Селектори css. Приклади використання
 
Селектори css. Приклади використання
 

Селектори в CSS допомагають вибрати необхідний елемент із наявних, що допомагає верстальщикам робити чистий та валідний код.

- FAQ по селекторам :nth-child

1) ul + p { color: red; }

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


2) div#container > ul { border: 1px solid black; }

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


3) ul ~ p { color: red; }

Цей CSS-селектор дуже схожий на X + Y, однак, є менш суворим. При використанні ul + p буде вибрати тільки перший елемент, що йде за Х. В даному випадку будуть вибрані всі елементи p, що йдуть за ul.


4) Вибірка по атрибутам

4.1) a[title] {color: green;}
В даному прикладі ми виділили всі посилання, що мають атрибут title.

4.2) a[href="http://everstudent.ru"] {color: #ffde00;}
Всі посилання, які посилаються на everstudent.ru будуть золотими. 

(Що ж робити, якщо посилання веде не безпосередньо на everstudent.ru, а наприклад на http://everstudent.ru/portfolio ? У цих випадках ми можемо використовувати регулярні вирази.)


4.3) a[href*="everstudent"] {color: #1f6053;}
Зірка позначає, що шукане значення має з'являтися де-небудь в атрибуті. Таким чином, CSS-селектор охоплює everstudent.ru, http://everstudent.ru/portfolio і т. д.

(Але що робити, якщо посилання веде на якийсь сторонніх і не пов'язаний ресурс, в адресу якого присутній everstudent? Тоді потрібно використовувати 

"^" - посилання на початок
4.4) a[href^="http"] {background: #1f6053;}
- охопить всі силки, у яких href починається з http.

"&" посилання на кінець рядка
4.5) a[href$=".jpg"] { color: red; }
- охопить всі силки, у яких закінчуються на ".jpg"


5) a[data-filetype="image"] { color: red; }

<a href="path/to/image.jpg" data-filetype="image"> Силка на зображення </a>

Виділяє мо за допомогою власних атрибутів. Але якщо в 1 силки атрибутів декілька то тоді так:

<a href="path/to/image.jpg" data-info="external image"> Click Me </a>
	
/ * Вибираемо силки з атрибутом data-info, значення "external" * /
a[data-info~="external"] { color: red; }

/ * І які вміщують значення "image" * /
a[data-info~="image"] { border: 1px solid black; }


6) input[type=radio]:checked { border:1px solid black; }

Цей псевдоклас виділяє тільки елементи інтерфейсу, такі як перемикач або прапорець. Причому ті, які зазначені/вибрані. Дуже просто.


7) div:not(#container) { color: blue; }

Вибрати всі div, за винятком того, що має id = container . Наведений вище код впоратися з цим!



8) Вибираємо першу літеру та строку

- Вибрати першу літеру:
p::first-letter {font-size: 2em;}


- Вибрати першу строку:	
p::first-line {font-weight: bold;font-size: 1.2em;}






 
 
 

  43   0
 
Додати
свій
коментар
оновити, якщо не видно коду
В роботі:
ПроектПрогресСтатус
Редизайн цього сайту 60%В процесі
Редизайн "Westplast" 80%02.01.18
Просування "Нова Ванна" 60%18.12.17
Darya 1.0 72%09.01.18
Сковорідки 100%Завершено
Сайт ремонт квартир 100%Завершено