18/18 Испытание | Пройти без !important?

Курсы §16. Наследование и каскадирование
1

Возможно ли пройти без применения !important? Натолкните и объясните если возможно

  • в этом куске добавил отступ в 10px, можно ли было обойтись без этого?
    .info .fact:nth-child(3), .info .fact:nth-child(5){ background: #ecf0f1; padding: 10px; 
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 550px;
    height: 300px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.profile {
    padding: 5px 10px;
}

.profile img {
    display: block;
    padding: 10px;
    border: 2px solid #34495e;
    border-radius: 8px;
}

.profile .photo {
    float: left;
    width: 152px;
}

.profile .info {
    float: left;
    width: 368px;
    margin-left: 10px;
}

.info #info-title,
div.profile div.info h2 {
    margin: 0 !important; 
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e;
    border-radius: 4px;
}

.info .fact:nth-child(2n) {
    padding: 10px;
    background: white;
}

.info .fact:nth-child(3),
.info .fact:nth-child(5){
    background: #ecf0f1;
    padding: 10px;
}

.fact:nth-child(2) div:after {
    content: ;
    display: table;
    clear: both;
}

.fact div.title {
    float: left;
    width: 120px;
    text-align: right;
    color: #7f8c8d;
}

.fact div.value {
    margin-left: 140px;
    color: #34495e;
}

.info .albums img {
    margin-top: 5px;
}

.info .albums img {
    float: left;
    margin-right: 5px !important;
}

.info .albums img:last-child{
    margin-right: 0 !important;
}

.profile .photo .button  {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
}

.profile .stroke {
    background: #3498db;
}

.profile .feed {
    background: #2ecc71;
}

.profile .startle {
    background: #e74c3c;
}
2

Тут понял как сделать уже после поста:

.info .fact,
.info .fact:nth-child(2n){
    padding: 10px;
    background: white;
}

.info .fact:nth-child(3),
.info .fact:nth-child(5){
    background: #ecf0f1;
    
}

И если я правильно понял, то если в HTML прописан атрибут стайл, без !important в СSS никак?
+Как прописать один селектор для 3 и 5 дива .fact?

3

На счет первого вы правы, без !important в этом задании не обойтись.
А второй вопрос не совсем поняла. Какой пятый .fact вы собрались стилизовать, если их всего четыре?

4

Почему то когда подставлен <…-child(5)> окрашивался 4ый .fact :confused: Почему так?

.info .fact:nth-child(3),
.info .fact:nth-child(5){
    background: #ecf0f1;

А все что я хотел это укоротить код до:

.info div.fact:nth-child(2n+1) {
    background: #ecf0f1;

Почитал о формулах для чайлдов, и вышел один селектор, который окрашивает вторую и четвертую .fact’ы

:arrow_down::arrow_down::arrow_down:
Тогда остается один вопрос на повестке, как в этом куске обойтись без !important?

.info .albums img {
    margin-top: 5px;
}

.info .albums img {
    float: left;
    margin-right: 5px !important;
}

.info .albums img:last-child{
    margin-right: 0 !important;
5

.info .albums img, #miska {
float: left;
margin-right: 5px;
}
А второй !important можно просто не писать.

6

За счет #miska важность селектора усилилась?

7

Поставив запятую, вы устанавливаете стили для всех изображений, и переопределяете эту запись в HTML-коде отдельно для изображения с id=“miska”:
#miska {
margin-right: 50px;
}