Проблема с псевдокласами?

Question

Ruslan @Romario5891

HTML
CSS

Проблема с псевдокласами?

Добрый день. Возникла проблема следующего рода. При верстке все псевдоклассы работают не корректно. Например задаю всем элементам margin-bottom:30px, соответственно у последнего я его пытаюсь почистить ипользуя last-child и задавая margin-bottom: 0. Но проблема в том что после этого все остальные элементы которым обьявил нижний отступ тоже обнуляются. С first-child та же самая проблема. В чем может быть проблема? Первый раз работаю с bootstrap может ли он повлиять на работу псевдоклассов?

Вопрос задан более трёх лет назад
108 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Rustam Bainazarov @SmthTo Куратор тега CSS

Тут проблема в другом — в отсутствии примера кода.

Написано более трёх лет назад

Ruslan @Romario5891 Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Module-9</title>
</head>
<body>
    <div  class="wrapper">
<!--HEADER-->
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 ">
                    <div class="top">
                        <p class="rightside">Log in <span class="sign">Sign up</span></p>
                 
                        <p class="leftside" >urlaubsgluck</p>
                    </div>
                </div>
                <div class="col-sm-12 ">
                     <h1>share your <br> holiday dreams</h1>
                     <p class="find-partner">And find the perfect partner to fullfill it</p>
                    <a class="find" href="#">Find your holiday partner</a>
                </div>
            </div>
        </div>
    </header>

    <!--SECTION-->
    <section class="section">
        <div class="container">
            <div class="row">
                
                <div class="col-12">
                    <h2>Meet a partner for your best holiday</h2>
                </div>
                <div class="col-12 col-md-6 order-md-1 col-lg-3 order-lg-1" >
                  <div class=" team-member order-">  
                    <div class="team team-first">
                         <img src="img/Layer 1.png">
                            <i class="icon shape1"></i>
                            <i class="icon picture1"></i>
                        </div>
                        <div class="team-descr">
                          <h3>Bradley Hunter</h3>
                         <p>Based in Chicago. I love playing tennis and loud music</p>
                        </div>
                    </div>      
                </div>
                <div class="col-12 col-md-6 order-md-3 col-lg-3 order-lg-2" >
                    <div class="team-member o">    
                        <div class="team team-first">
                              <img src="img/Layer 2.png">
                              <i class="icon shape2"></i>
                              <i class="icon picture2"></i>
                          </div>
                          <div class="team-descr">
                              <h3>Lucas Marsha</h3>
                              <p>I get my inspiration from nature and objects around me. I have passion to colours, typography and skatebords.</p>
                          </div>
                        </div>
                    </div>    
                <div class="col-12 col-md-6 order-md-2 col-lg-3 order-lg-3">
                    <div class="team-member three">
                            <div class="team team-first">
                                <img src="img/Layer 3.png">
                                <i class="icon shape3"></i>
                                <i class="icon picture3"></i>
                            </div>
                            <div class="team-descr">
                                <h3>Heather Walker</h3>
                                <p>I am happy perrson that loves cats and climbing mountain</p>
                            </div>
                    </div>        
                </div>
                <div class="col-12 col-md-6 order-md-4 col-lg-3 order-lg-4">
                    <div class="team-member four">     
                         <div class="team team-first">
                              <img src="img/Layer 4.png">
                              <i class="icon shape4"></i>
                              <i class="icon picture4"></i>
                          </div>
                          <div class="team-descr last">
                              <h3>Bradley Hunter</h3>
                              <p>Based in Chicago. I love playing tennis and loud music</p>
                          </div>
                    </div>  
                </div>
            </div>
        </div>
    </section>

    <!--FOOTER-->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <a href="#" class="button">See other partners</a>
                </div>
            </div>
        </div>
    </footer>
    </div>
</body>
</html>

Написано более трёх лет назад

Ruslan @Romario5891 Автор вопроса

А вот margin-bottom я давал team-descr. Соответственно у последнего через псевдоклас last-child я хотел его убрать, но margin-bottom исчез у всех блоков с класом team-descr.

Написано более трёх лет назад
Lynn «Кофеман» @Lynn

Romario5891, всё ещё отсутствует пример кода.

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

11 комментариев

Ruslan @Romario5891 Автор вопроса

Спасибо

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, это все логично, но я решил проверить все это по другому. Я сделал вот так

Bradley Hunter
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music
Based in Chicago. I love playing tennis and loud music

Я для всех class="name" сделлал то же самое, дал margin-bottom:30px, а для .name:last-child{
margin-bottom:}. После этого margin-bottom у всех элементов стал "0" Почему так?

Написано более трёх лет назад

Ruslan @Romario5891 Автор вопроса

<div class="team-descr">
                          <h3>Bradley Hunter</h3>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                         <p class="name">Based in Chicago. I love playing tennis and loud music</p>
                        </div>

Написано более трёх лет назад

Юрий @cheeroque

Ruslan, значит вы что-то сделали не так:

snippet

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, В том то и дело что даже в самых простых вариантах эти псевдоклассы не работают как нужно, у меня есть подозрение что все это из-за каких-то настроек сбросов стилей самого bootstrap. Пока им не пользовался, пока и проблем таких не было(((

Написано более трёх лет назад
Юрий @cheeroque

Ruslan, уверяю вас, в бутстрапе ничего такого нет. Пока вы не выложите проблемный код на какой-нибудь codepen, как я сделал выше, никто вам помочь не сможет.

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, Как закинуть полностью весь проект на codepen или JSFiddle чтобы вы могли просмотреть?

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, или дайте свою электронку я вам вышлю все полностью. Просто уже кучу времени потратил на выяснение, а ответа так и не нашел(

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, В примере, который вы написали, элементарно попробуйте вместо .name:last-child задайте другое значение .name:first-child и увидите что получилось

Написано более трёх лет назад
Юрий @cheeroque

Ruslan, first-child работать не будет, потому что первый .name не является первым элементом по счёту внутри родительского, перед ним ещё h3 стоит.

Написано более трёх лет назад
Ruslan @Romario5891 Автор вопроса

Юрий, Ну вот теперь-то точно со всем разобрался, спасибо

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 18 часов назад
- 69 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- вчера
- 109 просмотров
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 130 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 116 просмотров
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 90 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 163 просмотра
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 108 просмотров
1

ответ
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 153 просмотра
1

ответ
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 307 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 179 просмотров
0

ответов
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Senior Frontend-разработчик в команду управления доступами

SMALL

от 3 000 до 4 700 $

Тут проблема в другом — в отсутствии примера кода.
А вот margin-bottom я давал team-descr. Соответственно у последнего через псевдоклас last-child я хотел его убрать, но margin-bottom исчез у всех блоков с класом team-descr.
Romario5891, всё ещё отсутствует пример кода.

Answer 1 · 2021-04-15 08:04:53

Псевдоклассы работают ровно так, как и должны работать. Last-child работает в пределах непосредственного родителя, в вашем случае в каждом .team-member лежит ровно один .team-descr - он будет и first-child, и last-child, потому что он там всего один. Конкретно для этого куска кода нужно что-то вроде .col-12:last-child .team-descr, но проще последнему элементу просто добавить какой-нибудь класс типа .border-none и в нём сбросить бордер.

Проблема с псевдокласами?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт