JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox"> 
<input type="checkbox" checked> 
<br>
<input type="text" id="message">
<h3 id="widget-title">Сообщения:</h3>
<ul id="messages">
  <li id="message-1">Сообщение 1</li>
  <li id="message-2">Сообщение 2</li>
  <li id="message-3" data-action="delete">Сообщение 3</li>
  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
  <li id="message-5" data-action="edit delete">Сообщение 5</li>
  <li><a href="#">...</a></li>
</ul>
<a href="http://tutu.ru/logo.png">Ссылка 1</a>
<br>
<a href="http://www.tutu.ru/list.pdf">Ссылка 2</a>
    
    
    
    
<hr><fieldset><legend>Результат выполнения заданий</legend><pre></pre></fieldset>

JavaScript

get('input', 'Выбрать все теги input', 3);

get('#message', 'Найти все элементы с id=message', 1); 

get('[id|=message]', 'Найти все элементы с id=message или message-*', 6); 

get('[id^=message-]', 'Найти все элементы с id=message-*', 5); 

get('[href$=png]', 'Найти все ссылки с расширением href="...png"', 1); 

get('[type="checkbox"]', 'Выбрать input типа checkbox', 2);

get('[type="checkbox"]:not(:checked)', 'Выбрать input типа checkbox, НЕ отмеченный', 1);

get('[data-action~=delete]', 'Найти все элементы с data-action, содержащим delete в списке (через пробел)', 2); 

get('[data-action]:not([data-action~="delete"])', 'Найти все элементы, у которых ЕСТЬ атрибут data-action, но он НЕ содержит delete в списке (через пробел)', 1); 

get('#messages li:nth-child(2n)', 'Выбрать все чётные элементы списка #messages', 3);

get('h3#widget-title + *', 'Выбрать один элемент сразу за заголовком h3#widget-title на том же уровне вложенности', 1);

get('h3#widget-title ~ a', 'Выбрать все ссылки, следующие за заголовком h3#widget-title на том же уровне вложенности', 2);

get('#messages li:last-child a', 'Выбрать ссылку внутри последнего элемента списка #messages', 1);

/** --- **/

var tnum, pre;

function get(selector, desc, count) {
    var ae;
    pre = pre || document.querySelector('pre'),
    tnum = tnum || 1;

    if (selector === '...?') return;
    
    try {
        ae = document.querySelectorAll(selector);
    
        if (ae.length == count){
            pre.innerHTML += "+ Задание №" + tnum + " '" + desc + "' выполнено верно. \n";
        }
        else {
            pre.innerHTML += "- Задание №" + tnum + " '" + desc + "' НЕ выполнено! Подумайте еще... \n";
        }
    }
    catch (c) {
        pre.innerHTML += "[!] Задание №" + tnum + + " '" + desc + "' упало с ошибкой! Такой селектор писать нельзя! \n";
    }

    ++tnum;
}