Задание 3

Курсы Промежуточные испытания
1

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

html,body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
color:black;
background:white;
}
.range-filter {
padding-top:10px;
width:240px;
margin:auto;
margin-bottom:10px;
}
.range-controls {
position:relative;
height:80px;
margin-bottom:15px;
padding:0 30px;
background:#34495e;
border-radius:5px;
overflow:hidden;
}
.toggle {
margin-top:39px;
height:2px;
background:#d7dcde;
}
.min-toggle, .max-toggle {
height:2px;
background:#00ca74;
}
div:first-child .range-controls .scale, div:nth-child(2) .range-controls .scale

/, input .min-price, input.max-price/
{ position:absolute;
top:30px;
left:30px;
width:4px;
height:4px;
border:8px solid white;
background:#ababab;
cursor:pointer;
border-radius:50%;
}
div:first-child .range-controls .scale
{left:70px;
}

div:nth-child(2) .range-controls .scale {
left:165px;
}
input
{
width:55px;
padding:8px 10px;
margin-left:10px;
border:none;
background:#34495e;
font-size:16px;
font-family:“Tahoma”, sans-serif;
text-align:center;
color:#283136;
border-radius:5px;
color:white;

{
margin-right:14px;
}

{

2

Я попробую вам объяснить.
Это стили, которые должны создавать “кружочки”:
{ position:absolute;
top:30px;
left:30px;
width:4px;
height:4px;
border:8px solid white;
background:#ababab;
cursor:pointer;
border-radius:50%;
}
А теперь посмотрим, что должен выбрать ваш селектор. Начнем даже не с этого. Вам нужно 4 кружочка, а у вас записано только два селектора через запятую.
Ваш селектор: div:nth-child(2) .range-controls .scale расшифровывается примерно так: “стили для элемента с классом .scale, который находится внутри элемента с классом .range-controls, который в свою очередь вложен в элемент div, являющийся вторым дочерним элементом”.
В HTML-коде вы не найдете такой элемент, поэтому с вашими селекторами задание мы не доделаем. Да и сам селектор получается слишком длинным…
Элемент с классом .scale - это серая полоса высотой 2px, .bar - это зеленая полоса (в HTML-коде для нее уже написаны некоторые стили).
За кружочки отвечает селектор .toggle, а селекторы .min-toggle и .max-toggle определяют их положение на полосе.
Пробуйте доделать задание, теперь должно получиться.

2 лайка
3

Спасибо…очень доступно объяснили. все получилось

1 лайк
4

Не могу понять, в чем проблема.

html,body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
color:black;
background:white;
}

.range-filter{

padding-top:10px;
width:240px;
margin:auto;
margin-bottom:10px;

}

.range-controls{

position:relative;
height:80px;
margin-bottom:15px;
padding:0 30px;
background:#34495e;
border-radius:5px;
overflow:hidden;

}

.scale{

margin-top:39px;
height:2px;
background:#d7dcde;

}

.bar{

height:2px;
background:#00ca74;

}

.toggle{

position:absolute;
top:30px;
left:30px;
width:4px;
height:4px;
border:8px solid white;
background:#ababab;
cursor:pointer;
border-radius:50%;

}

.min-toggle{

left:70px;

}

.max-toggle{

left:165px;

}

.price-controls{

width:55px;
padding:8px 10px;
margin-left:10px;
border:none;
background:#34495e;
font-size:16px;
font-family:"Tahoma", sans-serif;
text-align:center;
color:#283136;
border-radius:5px;
color:white;

}

.min-price{

margin-right:14px;

}

Пробовал ставить в конце и max-price, и min-price, меняется одна из форм ввода, обе оформить не получается.

5

.min-price, .max-price{

width:55px;
padding:8px 10px;
margin-left:10px;
border:none;
background:#34495e;
font-size:16px;
font-family:“Tahoma”, sans-serif;
text-align:center;
color:#283136;
border-radius:5px;
color:white;
}
Ширина в 55px + синий фон для всего блока price-controls не подходит, правда?

3 лайка
6

Черт, забыл про запятую. Этот вариант так же пробовал, только без запятой =/ Благодарю.