DOM Selectors for single elements

let val;
//document.getElementById()
val = document.getElementById('task-title');

//Get things from the element
val = document.getElementById('task-title').id;
val = document.getElementById('task-title').className;

console.log(val);

const taskTitle = document.getElementById('task-title');

// Change styling 
taskTitle.style.background = 'orange';
taskTitle.style.color = 'white';
taskTitle.style.padding = '10px';

// Change content
taskTitle.textContent = 'Task List';
taskTitle.innerText = 'My Tasks';
taskTitle.innerHTML = '<span style="color: black">Task List</span>';

// document.querySelector()

console.log(document.querySelector('#task-title'));
console.log(document.querySelector('.card'));
console.log(document.querySelector('h5'));

document.querySelector('li').style.color = 'red';
document.querySelector('ul li').style.color = 'blue';

document.querySelector('li:last-child').style.color = 'orange';
document.querySelector('li:nth-child(3)').style.color = 'yellow';
document.querySelector('li:nth-child(odd)').style.backgorund = '#ccc';
document.querySelector('li:nth-child(even)').style.backgorund = '#000';