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

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{21-01-2018, 19:43 2 134 0}

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

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

1) ul + p { color: red; }

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

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

 приклад використання

<div id="container">
      
    <ul>
             
        <li> Елемент списку
            <ul>
                <li> Дочірній лемент</li>
            </ul>
        </li>
          
        <li> Елемент списку </li>
             
        <li> Елемент списку </li>
             
        <li> Елемент списку </li>
          
    </ul>
   
</div>

Розглянутий 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>

Коментарі