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

Question

Ruslan @Romario5891

HTML
CSS

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

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

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

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, всё ещё отсутствует пример кода.

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

Решения вопроса 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 Автор вопроса

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

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

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

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 36 минут назад
- 29 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 41 минуту назад
- 14 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 2 часа назад
- 27 просмотров
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 4 часа назад
- 36 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 4 часа назад
- 47 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 7 часов назад
- 47 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 8 часов назад
- 68 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 8 часов назад
- 34 просмотра
1

ответ
JavaScript

+3 ещё

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

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- вчера
- 138 просмотров
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Наполнить сайты контентом - КМ

18 апр. 2024, в 18:49

80000 руб./за проект

Нужно настроить рекламу в Tim Tok

18 апр. 2024, в 18:47

80000 руб./за проект

Настроить контекстную рекламу AdWords, КМС, прероллы в Youtu

18 апр. 2024, в 18:45

80000 руб./за проект

Тут проблема в другом — в отсутствии примера кода.
А вот 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 и в нём сбросить бордер.

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

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

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

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