CSS Diner, уровень 5: Sprinkles — решения и примеры CSS-селекторов

В игре CSS Diner уровень 5 называется «Sprinkles». На этом уровне вам будет предложено выбирать элементы на основе их атрибутов. Вот решение с использованием различных селекторов CSS:

  1. Выбрать все элементы класса «шоколад»:

    .chocolate {
     /* CSS rules */
    }
  2. Выберите элемент с идентификатором «ваниль»:

    #vanilla {
     /* CSS rules */
    }
  3. Выберите первый дочерний элемент элемента с классом «cone»:

    .cone :first-child {
     /* CSS rules */
    }
  4. Выберите последний дочерний элемент элемента с классом «вишня»:

    .cherry :last-child {
     /* CSS rules */
    }
  5. Выберите все элементы с атрибутом «сладкий»:

    [sweet] {
     /* CSS rules */
    }
  6. Выберите все элементы с атрибутом «кислый» и значением «вкусный»:

    [sour="yummy"] {
     /* CSS rules */
    }
  7. Выберите все элементы, у которых атрибут «аромат» начинается с буквы «c»:

    [flavor^="c"] {
     /* CSS rules */
    }
  8. Выберите все элементы, у которых атрибут «аромат» заканчивается на букву «y»:

    [flavor$="y"] {
     /* CSS rules */
    }
  9. Выберите все элементы, имеющие атрибут «аромат», содержащий букву «а»:

    [flavor*="a"] {
     /* CSS rules */
    }