Мастерская: декоративные эффекты на HTML5 и CSS3 / Испытание: статистика браузеров [18/30]

Курсы
1

Имя файла изображения1920×1080 317 KB

помогите с заданием , не могу выбрать селектора для круга , div[id=""] вставляю :frowning:

2

Можно просто по id, #safari, например.

3

пробовал )

4

первый селектор срабатывает, а последующий # нет , поэтому вот и мучаюсь как выбрать именно эти селектора

5

nth-child тоже пробовал

6

По айди должно работать, надо нужным селекторам только их задать )

7

Имя файла изображения1920×1080 313 KB

8

айди стоят , не работают , вот в чем проблема

9

Скиньте текстом весь CSS-код, пожалуйста.

10 
html, body {
    width: 550px;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    background: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 0;
}

div.pie-container {
    position: relative;
    float: left;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.8);
}

div.pie-container::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 50;
    width: 50%;
    height: 50%;
    color: white;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8) inset;
}

#ie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #AAA;
    clip: rect(0px, 75px, 150px, 0px);
    border-radius: 50%;
}

#firefox {
    z-index: 10;
    background-color: #AAA;
    transform: rotate(-20deg);
}

#chrome {
    z-index: 20;
    background-color: #0074D9;
    transform: rotate(160deg);
}

#safari{
    z-index: 30;
    background-color: #FF851B;
    transform: rotate(20deg);
}

div.pie:nth-child() {
    z-index: 40;
    background-color: #2ECC40;
    transform: rotate(100deg);
}

div.stats {
    float: left;
    margin-left: 50px;
}

selector {
   list-style: none;
}

ul li {
    position: relative;
    margin: 10px 0;
}

li:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: -25px;
    top: 2px;
    background-color: #AAA;
}

li:nth-child(1):after {
    background-color: #2ECC40;
}

li:nth-child(2):after {
    background-color: #FF851B;
}

li:nth-child(3):after {
    background-color: #0074D9;
}
11

# стоят

12

div[id=""] тоже не срабатывает ,не знаю в чем прикол)

13

Замените на .pie

14

можете решение дать? посмотреть что не так и запомнить))

15

Не, решение не могу ) Только указать на ошибки. Ошибка сейчас

#ie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #AAA;
    clip: rect(0px, 75px, 150px, 0px);
    border-radius: 50%;
}

это должен быть каждый .pie, а не только один #ie.

16

.pie #ie?

17

ненавижу выбирать селектора)))

18

Нет, вместо #ie нужно .pie :grinning:

19

.pie:nth-child :slight_smile: спасибо большое за помощь)))