Часто при розробці на клієнтських ресурсах девелоперу з міркувань безпеки надається доступ лише до CSS таблиці стилів. Як же мінімізувати незручності обмеженого доступу?
В попередніх матеріалам ми говорили за CSS селектори. Проте серед них є кілька таких, за які варто згадати окремо. Особливо, коли виникає необхідність підкоректувати щось в коді сторінки.
::after, ::before
Дають можливість витворяти нові об’єкти на вибраних нами селекторах. Діапазон використання просто необмежений. Не забудьте лише виставити в декларації властивостей наступний параметр, без нього об’єкти не утворяться:
div::after {
content: " ";
}
:nth-child(n)
Псевдостиль, який дозволяє дістати один з потрібних об’єктів, який має спільний з іншими клас. Я найчастіше користувався ним, коли потрібно було змінити ширину для одного з пунктів меню.
ul li:nth-child(2){
}
:nth-last-child(n)
Не менш апетитна річ, яка дозволяє робити аналогічні речі, проте вже з кінця списку.
ul li:nth-last-child(2){
}
other blocks (~)
Іноді при наведенні на певний елемент потрібно зачіпити інший. Параметр “~” дозволяє звертатись до об’єктів, які на цьому рівні вкладення йдуть після виділеного.
Такий код допоможе виділити усі наступні пункти в списку після виділеного.
li:hover ~ .li
{
background: red;
}
а такий — кожен другий пункт.
li:hover ~ .li:nth-child(odd)
{
background: red;
}
Смачного 🙂
:nth-child(n) – в даному випадку (n) – це номер об”єкту? Зміни будуть стосуватися тільки цього елементу?..
“…li:hover ~ .li:nth-child (odd) – а такий — кожен другий пункт.” – а якщо я почала застосовувати ці зміни для елементу, який є непарний ? В англ.мові odd – непарний, додатковий. Наприклад – є елементи ol li – список нумерований, і я в css додаю блок li:hover ~ .li:nth-child (odd) від 3 елмента, який по порядку є непарним, то зміни будуть вже для 4?
“:nth-child(n) – в даному випадку (n) – це номер об”єкту ”
— так, все правильно
“а якщо я почала застосовувати ці зміни”
— чергуйте “odd” та “even” по ситуації
.post {
float: left;
width: 31%;
margin: 10px;
}
.post:hover {
background:#000;
width: 62%;
-moz-transition: all 0.5s ease-in-out ;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
просто пост – це параметри стилю в статиці, а коли до посту додаємо :hover і пишемо параметри, то це власне те, як він поміняється, коли навести на елемент курсором