Выбор элементов внутри других элементов на CSS.

На практике, при работе с CSS, часто может стоять такая задача, что нужно выбрать какой-то элемент на веб-странице, который находится внутри другого элемента. 

Предположим, у нас есть элемент table.

<table id="table1">
    <tr>
        <td>Элемент 1</td>
        <td>Элемент 2</td>
        <td>Элемент 3</td>
    </tr>
</table>

В нем есть вложенные элементы tr и td.

Давайте создадим еще одну аналогичную таблицу, но с id="table2":

<table id="table2">
    <tr>
        <td>Элемент 1</td>
        <td>Элемент 2</td>
        <td>Элемент 3</td>
    </tr>
</table>

Предположим, что у нас стоит задача, сделать все элементы td внутри table1 синим цветом, а все элементы td внутри table2 красным цветом.

Причем, у элемента td нет никакого класса и идентификатора, по которому можно было бы сделать выборку.

Давайте подумаем как можно решить эту задачу.

Если просто воспользоваться селектором td, то мы не сможем с вами отделить элементы td внутри первой и второй таблицы.

Решить эту проблему поможет специальный синтаксис CSS, который позволяет выбирать элементы внутри других элементов. 

Для этого сначала, мы используем селектор идентификатора и для того, чтобы указать, что мы хотим обратиться к какому-то элементу, который находится внутри другого элемента, нужно воспользоваться знаком пробел.

Например:

#table1 td {
color:blue;
}

Этой записью мы говорим, что нужно применить стили CSS к элементу td, который находится внутри элемента с id="table1".

С селекторами CSS, которые позволяют обращаться к элементам внутри других элементов приходиться встречаться довольно часто на практике. Попробуйте и поэкспериментируйте с этим, в будущем, это может пригодиться.