Как обойтись без псевдоклассов?

Question

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

Answer 1

Ну вот же, всё очень красиво. Ну и подумаешь используется псевдокласс :nth-of-type, что он кушать просит? Что еще нужно для полного счастья?

.wrapper {
  width: 250px;
  border-top: 2px solid gainsboro;
  border-right: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  border-left: 4px solid gainsboro;
  margin-bottom: 100px;
}

.wrp {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  clear: both;
}

.wrp h3 {
  border-bottom: 1px solid gainsboro;
  margin: 0 0 10px 0;
  padding: 10px;
  font-size: 20px;
}

.wrp p {
  clear: both;
  margin: 0;
  padding: 10px;
  font-size: 14px;
}

.wrp span {
  margin: 0;
  padding: 10px;
  color: gray;
  font-size: 12px;
  display: inline-block;
}

.wrp span:nth-of-type(2) {
  float: right;
}

.wrp span:nth-of-type(3) {
  float: right;
}

button {
  display: block;
  margin: 20px auto;
  width: 180px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  color: deepskyblue;
  border: 1px solid deepskyblue;
  border-radius: 40px;
}

<div class="wrapper">
  <div class="wrp">
    <h3>Новости дня</h3>
    <p>Как обойтись без псевдоклассов?</p>
    <span>/ ЧМ по футболу</span><span>комм</span><span>часы</span>
  </div>
  <div class="wrp">
    <p>Подскажите пожалуйста, как без использования псевдоклассов добиться разных отступов</p>
    <span>/ Транспорт</span><span>комм</span><span>часы</span>
  </div>
  <div class="wrp">
    <p>Как без использования псевдоклассов добиться разных отступов между элементами под новостью?</p>
    <span>/ Погода</span><span>комм</span><span>часы</span>
  </div>
  <button>Все новости</button>
</div>

Или, если категорически псевдоклассы не нужны, тогда вот так:

.wrapper {
  width: 250px;
  border-top: 2px solid gainsboro;
  border-right: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  border-left: 4px solid gainsboro;
  margin-bottom: 100px;
}

.wrp {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  clear: both;
}

.wrp h3 {
  border-bottom: 1px solid gainsboro;
  margin: 0 0 10px 0;
  padding: 10px;
  font-size: 20px;
}

.wrp p {
  clear: both;
  margin: 0;
  padding: 10px;
  font-size: 14px;
}

.wrp span {
  margin: 0;
  padding: 10px;
  color: gray;
  font-size: 12px;
  float: left;
}

.wrp i {
  float: right;
  font-style: normal;
  margin: 0;
  padding: 10px;
  color: gray;
  font-size: 12px;
}

button {
  display: block;
  margin: 20px auto;
  width: 180px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  color: deepskyblue;
  border: 1px solid deepskyblue;
  border-radius: 40px;
}

<div class="wrapper">
  <div class="wrp">
    <h3>Новости дня</h3>
    <p>Как обойтись без псевдоклассов?</p>
    <span>/ ЧМ по футболу</span><i>комм</i><i>часы</i>
  </div>
  <div class="wrp">
    <p>Подскажите пожалуйста, как без использования псевдоклассов добиться разных отступов</p>
    <span>/ Транспорт</span><i>комм</i><i>часы</i>
  </div>
  <div class="wrp">
    <p>Как без использования псевдоклассов добиться разных отступов между элементами под новостью?</p>
    <span>/ Погода</span><i>комм</i><i>часы</i>
  </div>
  <button>Все новости</button>
</div>

БЛОГ НА HUSL

Как обойтись без псевдоклассов?

Ответы (1 шт):