Как изменить цвет текста в html файле если span уже использован?

Question

[329]

Добрый день, у меня есть кусок кода а точнее список который предаствляет собой ссылки с картинками, белым текстом на фоне картинок и как мне хотелось-бы разноцветным текстом под картинками, вопрос, как изменить цвет текста под картинками?

<section class="colors">
				<ul>
				
						<a href="1.html"><p>White text</p><img src="mainpage_files/1.jpg">
						<span>green</span></a>
					
						<a href="2.html"><p>White text</p><img src="mainpage_files/2.jpg">
						<span>red</span></a>
					
						<a href="3.html"><p>White text</p><img src="mainpage_files/3.jpg">
						<span>yellow</span></a>
					
						<a href="4.html"><p>White text</p><img src="mainpage_files/4.jpg">
						<span>black</span></a>
					
						<a href="5.html"><p>White text</p><img src="mainpage_files/5.jpg">
						<span>green</span></a>
					
						<a href="6.html"><p>White text</p><img src="mainpage_files/6.jpg">
						<span>green</span></a>

						<a href="7.html"><p>White text</p><img src="mainpage_files/7.jpg">
						<span>green</span></a>

						<a href="8.html"><p>White text</p><img src="mainpage_files/8.jpg">
						<span>green</span></a>
					
						
					
				</ul>
			</section>

CSS:

.colors{
	padding-bottom: 50vh;
}
.colors> ul {
	padding: 5vh 1vh;
	text-align: center;
}
.colors> ul > a {
	margin: 2.5vh 2.5vh;
	display: inline-block;
	width: 40vh;
	height: 20vh;
	position: relative;
}
.colors> ul > a > p {
	text-align: center;
	height: 4.5vh;
	font-size: 3.5vh;
	color: var(--color-white);
	display: inline-block;
	position: absolute;
	top: 0; bottom: 1vh; left: 0; right: 0;
	text-shadow: 0 0 5px var(--color-dark);
	margin: auto;
}
.colors> ul > a > span {
	text-align: center;
	height: 4.5vh;
	font-size: 2.0vh;
	color: var(--color-red);
	display: inline-block;
	position: absolute;
	bottom: -5vh; right: 0; left: 0;
	text-shadow: 0 0 3px var(--color-white);*/
	margin: auto;
}
.colors> ul > a > img {
	border-radius: 5%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1;
}

Comments

[iBird Rose]

можешь классы для span'а сделать. можешь напрямую в теге style ему цвет писать по типу:
<span style="color: black;">black</span>

[329]

iBird Rose, Спасибо большое за помощь!

Answer 1

[Taulan Khatuaev]

Вы можете изменить цвет текста под картинками, изменив значение свойства color в селекторе .colors> ul > a > span

.colors> ul > a > span {
  text-align: center;
  height: 4.5vh;
  font-size: 2.0vh;
  color: green;
  display: inline-block;
  position: absolute;
  bottom: -5vh; right: 0; left: 0;
  text-shadow: 0 0 3px var(--color-white);
  margin: auto;
}