Как применить css только для первого промежутка

Попытка применить CSS

.content>span:first-child{
  color: red;
  font-size: 12px;
  font-weight: bold;
}
<span class = "content">
       <svg xmlns = "http://www.w3.org/2000/svg">
       <use xlink:href = "assets/icons.svg#back-button"></use>
    </svg>
     <span> Lorem ipsom </span>
<!-- only this span font color should be red -->

<span>
       <span> </span>
</span>
</span>

только для первого пролета. Я пробовал, но это не работает. Если кто знает помогите найти решение.

Демонстрация: https://stackblitz.com/edit/angular-svg-use-gvmekn?file=src%2Fapp%2Fapp.component.html

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
72
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Вы можете использовать первый тип, например:

.content > span:first-of-type {
    color:red;
}

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

Старый:

<span> Lorem ipsom </span>

Новый:

<span class = "firstspan"> Lorem ipsom </span>

(Редактировать: извините, забыл пометить как код, поэтому он не отображался правильно)

затем вы можете добавить имя класса в файл css следующим образом:

.firstspan {
  /* this is a example of code that will make the text red*/
  color: red;
  font-size: 12px;
  font-weight: bold;
}

Надеюсь, это поможет.

Проблема в том, что селектор :first-child применяется только в том случае, если нужный вам span является первым потомком .content.

В вашем случае первый ребенок - это тег svg, поэтому он не работает.

Есть 3 способа обойти это:

  1. Сделайте селектор .content > span:nth-child(2). Это будет работать в приведенном выше примере, но снова сломается, если вы когда-нибудь поместите дополнительные элементы между рассматриваемым диапазоном и вашим svg.

  2. .content > span:first-of-type. Кажется, это то, что вам нужно, то есть первый промежуток, который является дочерним элементом .content.

  3. span.some-meaningful-classname — это дает вам возможность точно выбрать, к каким промежуткам применить класс, добавив classname = "some-meaningful-classname" к вашему промежутку.

Вам решать, с чем идти, в зависимости от ваших требований.

Кроме того, здесь есть хорошая ссылка на селекторы CSS: https://www.w3schools.com/cssref/css_selectors.php

используйте псевдокласс :first-of-type

:first-of-type

CSS-псевдокласс :first-of-type представляет первый элемент своего типа среди группы родственных элементов.

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

span.content > span:first-of-type {
  color: red;
}
<span class = "content">
  <svg viewBox = "0 0 10 2" xmlns = "http://www.w3.org/2000/svg">
  <line x1 = "0" y1 = "0" x2 = "10" y2 = "0" stroke = "black" />
</svg>

  <span> Lorem ipsom </span>
  <!-- only this span font color should be red -->

  <span>
    Child
   <span> Inner child </span>
  </span>
</span>

использовать соседний родственный комбинатор

+

Соседний родственный комбинатор (+) разделяет два селектора и соответствует второму элементу, только если он непосредственно следует за первым элементом, и оба являются дочерними элементами одного и того же родительского элемента.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

svg+span {
  color: red;
}
<span class = "content">
  <svg viewBox = "0 0 10 2" xmlns = "http://www.w3.org/2000/svg">
  <line x1 = "0" y1 = "0" x2 = "10" y2 = "0" stroke = "black" />
</svg>

  <span> Lorem ipsom </span>
  <!-- only this span font color should be red -->

  <span>
    Child
   <span> Inner child </span>
  </span>
</span>

Поскольку .container также является диапазоном, объявления перекрывают друг друга.


Для этого вам просто нужно настроить таргетинг на n-го дочернего элемента, например span:nth-child(2) или любой другой диапазон, который вы хотите, с помощью nth-child('child No.'). Вот решение:


HTML:

<span class = "content">
      <svg xmlns = "http://www.w3.org/2000/svg">
        <use xlink:href = "assets/icons.svg#back-button"></use>
      </svg>
      <span> Lorem ipsom </span>
      <!-- only this span font color should be red -->

      <span>
        <span> </span>
      </span>
    </span>

CSS:

span:nth-child(2) {
        color: red;
        font-size: 12px;
        font-weight: bold;
      }

Другие вопросы по теме