9/18 - проблема отображения иконок социальных сетей

Курсы §14. Мастерская: декоративные элементы
1
Испытание: карточка курса 
    <div class="conteiner">
    <h1 class="size">Курс &laquo;Фоны&raquo;</h1>
    
    <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
    <div class="share">
    <a class="social fb" href="#"></a>
    <a class="social tw" href="#"></a>
    <a class="social go" href="#"></a>
    </div>
    
    
    </div>
</body>

.conteiner {
background-color: #1abc9c;
width: 200px;
height: 215px;
padding: 10px 20px;
color: white;
}

.size {
font-size: 19px;
padding-bottom: 5px;
}

.share .social {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
margin-top: 10px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
}

.fb {
background-position: -30px 0px;
}

.social.tw {
background-position: -30px 0px;
}

.social .go {
background-position: -60px 0px;
}

Безымянный.png385×677 34.9 KB

Добрый день.

  1. Селектор .fb не отображает положения спрайта. Для наглядности задал координаты иконки твитера.
  2. Контекстные селекторы .social.tw отображают положение, но без пробела между ними, хотя синтаксически верно использовать пробел, как мне помнится.

Не могу сообразить в чем может быть причина? Прошу тыкнуть лицом в ошибку.

2

А дело именно в пробеле. У вас все три ссылки одинаковы и равноправны. При этом селекторы разные.
Третий селектор совершенно неверный при данной разметке, потому что пробел показывает вложенность, а по коду оба класса принадлежат одной ссылке.
Приведите селекторы для ссылок к единообразному написанию.

3

Я намеренно оформил селекторы по разному, хотел показать, что только в случае контекстных селекторов без пробелов координаты работают.
Привел к единообразному написанию и не работает. Что-то я не усвоил, видимо “Наследование”.

.fb {
background-position: 0px 0px;
}
.tw {
background-position: -30px 0px;
}
.go {
background-position: -60px 0px;
}

4

Убрал вложенность у родителя и заработало, но почему при контексности родителя, селекторы не отображаются?

.share .social {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
margin-top: 10px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
}

5

Да, вы правы. Курс “Наследование и каскадирование” нужно повторить.
Здесь дело в специфичности.
Селектор с двумя классами .share .social имеет больший уровень специфичности. Поэтому когда вы пишете только .go для координат части изображения, уровня специфичности не хватает для переопределения background-position, и вы видите первую картинку с координатами 0 0.

6

Ах, точно. Дело в специфичности, я ведь бэграунд со спрайтом задал для родителя. В таком случае - можно было для каждой ссылки задать бэкграунд, но это не рационально. Спасибо больше. У меня по ходу курсов возникали вопросы и на некоторые из них я не нашел ответы, можно я их тут буду задавать?)

7

Не для родителя. Будьте внимательны. Вы как раз прописали фон для каждой ссылки, а потом отдельными классами, относящимися к ссылкам изменили координаты.

Для этого и существует форум. Конечно, задавайте. Но прежде чем создавать новую тему, воспользуйтесь поиском по форуму и его разделам. Возможно, ваш вопрос уже был разобран ранее.

8

Очень виноват за свою невнимательность. Спасибо. Конечно, лишних тем не намерен создавать. Если в этой теме задавать вопросы не относящиеся к этому заданию? Неуместно?)

9

Если вопрос не относится к выбранному для темы разделу, то нет.
http://forum.academy/categories Вопрос можно задать в уже созданной теме подходящего раздела.