Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Розробка та створення сайтів » Блог » css » Селектори css. Приклади використання

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 21-01-2018, 19:43 2 128 0
Селектори 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;}


9) Виділити всі елементи окрім наведеного:

.katvud:hover a {opacity:0.5;}
.katvud:hover a:hover {opacity:1;}
.katvud:hover .katvud a:not(:hover) {opacity:0.5;}
---
<section class="katvud">
<a>силка</a>
<a>силка</a>
<a>силка</a>
<a>силка</a>
<a>силка</a>
</section>




 
 

Розробка сайтів | Створення сайтів

Коментарі

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

  • Натисніть на зображення, щоб оновити код, якщо він нерозбірливий
Останнє на сайті
  • seo

    Українські каталоги для реєстрації сайту

    coments/12 vievs/ 1
  • faq

    Які існують російські домени?

    coments/14 vievs/ 0
  • seo

    Українська двигун для сайту - Ardilla-CMS

    coments/103 vievs/ 0
Останнє в магазині
Картинка в meta з додаткового поля Картинка в meta з додаткового поля / Платні модулі DLE
Коментарі
Популярне на сайті

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео: Анекдоти

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */