Задать вопрос

dbashkatoff

Лайки

  • Какой CSS селектор вычленит первое вхождение по классу?

    ZloDeeV
    @ZloDeeV Автор вопроса
    Верстаю в своё удовольствие
    В общем, решение имеется, но оно лишь усложнило задачу.
    Чтобы выделить первый элемент по классу можно сделать следующее:
    Навесить стили на весь класс .highlight {}, а потом перекрыть их селектором .highlight ~ td.highlight {}, который сработает на всех элементах, которые идут после первого попавшегося по классу.
    Ответ написан
    Комментировать
    Комментировать

  • Какой CSS селектор вычленит первое вхождение по классу?

    zzloy
    @zzloy
    Дизайнер
    Ещё в CSS есть селектор :nth-child(n).

    Где n — номер позиции.

    Например:
    <ul>
<li>Красный текст</li>
<li>Чёрный текст</li>
<li>Чёрный текст</li>
</ul>


    li { 
color: #000;
}

li:nth-child(1) {
color: red;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как выглядит современный процесс верстки?

    @coderxx
    keep calm and learn js
    Не уверен что начинающим верстальщикам нужно заморачивать себе голову всем этим ужосом:) Но может кому-то и пригодится:
    - создаю новый проект на базе немного допиленного Optimized4HTML (можно копировать папку руками, можно сохранить в PhpStorm как темплейт, второе разумеется удобнее). Проект имеет следующую структуру:
    5c13ab56a03e8108817224.png
    - открываю его в PHPStorm, через командную строку устанавливаю пакеты и запускаю вотчер со следующей конфигурацией:
    5c13ad0d5c912921297608.png
    (таким образом отслеживаются изменения в файлах index.html, *.scss, common.js, а так же релодится браузер; в процессе верстки просто перескакиваем на виртуальный рабочий стол с открытым сайтом и сразу видим изменения, а если есть второй монитор то вообще песня). Кстати, перечень пакетов ннада?
    5c13ae2b57082880473288.png
    - из плюшек emmet и sass обязательно, в качестве таскранера - gulp.
    - макеты у меня в .sketch, так же кто не пробовал советую попробовать Figma, получите практически скетч в браузере. Adobe Photoshop не люблю. Adobe XD не пробовал, но осуждаю. Здесь наверное больше дело вкуса и реалий, в которых вы работаете (например, в каком формате получаете макеты, какая ОС на рабочем компе).
    Вроде все просто. Что непонятно - спрашивайте, отвечу.

    UPD. Optimized4HTML недавно перешел на Gulp 4, советую попробовать. Учтите, что Gulp 4 не имеет обратной совместимости с галпфайлами предыдущей версии, так как немного изменился синтаксис.
    Ответ написан
    9 комментариев
    9 комментариев

  • Есть ли разница между порядком следования CSS правил?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Конкретные примеры:
    .chuk {height: 40px; width: 40px;}
.gek {height: 20px;  width: 20px;}

    порядок не имеет значение, Чук выше Гека, как не крути
    .hren {fill: red;}
.hren {fill: green;}

    порядок имеет значение, хрен стал зеленым
    .chuk > .hren {fill: red;}
.hren {fill: green;}

    хрен Чука красный, не зависимо от последовательности

    я вообще перемешал все правила рандомом

    как видите все зависит от того что это за правила. Может вообще ни на что не повлиять, а может повлиять весьма конкретно.
    Еще пример уже с порядком свойств, а не правил:

    .gek > .hren {
     fill: red;
     height: 22px;
}
.chuk > .hren {
     height: 24px;
     fill: red;
}

    У Чука выше (или длиннее?) не зависимо от порядка свойств.
    Ответ написан
    4 комментария
    4 комментария

  • Какой смысл в написании переменных в фигурных скобках?

    Danakt
    @Danakt
    Это называется деструктурирующее присваивание.

    Запись
    const { value } = event.target
    эквивалентна записи
    const value = event.target.value

    А запись
    const { value, id: identificator } = event.target
    эквивалентна 
    const value = event.target.value
const identificator = event.target.id

    Подробнее читайте тут

    По поводу второй записи:
    PS. И как работает эта запись
    = type => ev =>
    ? type это аргумент, а ev? Аргумент в аргумент?

    Это:
    const handleChange = type => event => {
  // ...
}

    тоже самое, что и
    const handleChange = (type) => {
  return (event) => {
    // ...
  }
}}
    Ответ написан
    2 комментария
    2 комментария