0

I have some CSS for the span tag. All of these are rendered inside the shadow-root. Which looks like the following.

.class-name-a .class-name-b > span {
border-left: var(--css-token-right-statement-border-left);
font-family: GilroySemiBold;
font-size: 16px;
margin-left: var(--css-token-right-statement-spacing);
order: 3;
padding-left: var(--css-token-right-statement-spacing);}

How can we override the CSS for this span tag?

Sikshya Maharjan
  • 296
  • 2
  • 6
  • Welcome to StackOverflow, hope you will find new knowledge here. You can help us answering your question, by adding a [minimal-reproducible-example StackOverflow Snippet](https://stackoverflow.com/help/minimal-reproducible-example). It will help readers execute your code with one click. And help create answers with one click. Thank you. – Danny '365CSI' Engelman Aug 03 '23 at 06:36

2 Answers2

1

Your question is unclear. I think you are asking how to write another declaration block that would override the declaration block that you included in your question.

In order to do so, you'll need to match or increase the specificity of the selector. This is easily done by using the same selector:

.class-name-a .class-name-b > span

Related info: Cascade, specificity, and inheritance


This example snippet shows the second declaration block for span overrides the same property values that are declared in the first and third declaration blocks for span.

:root {
  --css-token-right-statement-border-left: 100px dashed;
  --css-token-right-statement-spacing: 100px;
}

.class-name-a .class-name-b > span {
  margin-left: var(--css-token-right-statement-spacing);
  padding-left: var(--css-token-right-statement-spacing);
  color: darkorange;
  background-color: aliceblue;
  border-left: var(--css-token-right-statement-border-left);
}

.class-name-a .class-name-b > span {
  margin-left: 1em;
  padding-left: 1em;
  color: red;
  background-color: yellow;
  border-left: 1em double;
}

span {
  margin-left: 500px;
  padding-left: 500px;
  color: blue;
  background-color: black;
  border: 2px solid;
  border-left: 500px solid;
}
<div class="class-name-a">
  <p class="class-name-b">
    <span>StackOverflow</span>
  </p>
</div>
Tim R
  • 2,622
  • 1
  • 3
  • 19
0

try using !important example

    .class-name-a .class-name-b > span {
  border-left: new-value !important;
  font-family: new-font !important;
  font-size: new-size !important;
  margin-left: new-value !important;
  order: new-value !important;
  padding-left: new-value !important;
}
peter iskandar
  • 1
  • 3