CODEWITHSUNDEEP
htmlcss
bakzkndd
bakzkndd

Reputation: 123

how would i change the text color without the text having a class?

So I'm trying to change make the text display/change color but so far all I can do is change width and height, which doesn't really affect anything in my current situation.

HTML:

<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist">by USAO, Laur</div>

CSS:

.size12-3cLvbJ.subtext-3CDbHg.spotify-artist {
  display: inline;
  height: 15px;
  width: 165px;
  background-color: #FFFFFF !important;
}

The display: inline and background-color don't really affect anything. I've tried color: #FFFFFF; but that didn't do anything either

Upvotes: 1

Views: 1296

Answers (2)

Spectric
Spectric

Reputation: 31992

how would i change the text color without the text having a class?

Try an inline style, which overrides class styles

<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist" style="color:red">by USAO, Laur</div>

You can also use the font tag, although be warned support for it was deprecated in HTML5 and support for it across browsers will likely be dropped soon.

<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist"><font color="red">by USAO, Laur</font></div>

I'm trying to theme something so all i have is CSS

Use the color attribute. For example:

.spotify-artist{
  color:red !important;
}
<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist">by USAO, Laur</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

color: is indeed the way to go. If your color is not taking effect, there can be only be three culprits:

  • You have cached the old stylesheet. Try a hard refresh with CTRL + SHIFT + R.
  • You have incorrectly referenced the stylesheet. Ensure the reference is correct, and other styles appear.
  • The third is the most likely culprit, a problem of specificity. This means that you are correctly applying the style, but it is being overridden. Ensure that you don't have any other rules affecting the colour of the element, and apply more specificity if needed.

CSS rules should always be added with the lowest possible specificity:

  • First try the element
  • Then try the class
  • Then try the ID
  • Then resort to inline styles
  • Finally resort to !important declarations

Base level specificity can be seen applying the style correctly here:

.size12-3cLvbJ.subtext-3CDbHg.spotify-artist {
  display: inline;
  height: 15px;
  width: 165px;
  background-color: #FFFFFF !important;
  color: red; /* Added */
}
<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist">by USAO, Laur</div>

Here is an extended example with colours conflicting:

.size12-3cLvbJ.subtext-3CDbHg.spotify-artist {
  display: inline;
  height: 15px;
  width: 165px;
  background-color: #FFFFFF !important;
  color: red; /* Added */
}

div {
  color: blue; /* Applied, but not specific enough */
}
<div class="size12-3cLvbJ subtext-3CDbHg spotify-artist">by USAO, Laur</div>
<div>Example</div>

You can see this happening by inspecting the element in the F12 Developer Tools (note the strikethrough):

F12

Upvotes: 2

Related Questions