CODEWITHSUNDEEP
htmlcss
Plamen Penchev
Plamen Penchev

Reputation: 437

Css Overwrite issue - Change the scope of external styles

my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css Normal:

enter image description here

And after I opened the product description

enter image description here

Here is anchor style from developer tool

enter image description here

So I need any idea how to separete ebay product css with my css. One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.

Upvotes: 1

Views: 286

Answers (3)

ATP
ATP

Reputation: 3249

If you want to remove all exist style and reset it to default you can use:

  all: initial;

Upvotes: 0

Badal S
Badal S

Reputation: 567

create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.

Here how you do: create the icons/text of anchor inside a element and give inline CSS

<a href="http://www.example.com" target="_blank">
    <span style="color: #ffffff !important;" >icons</span>
</a>

A quick test in Chrome shows that the

a:visited * { ... !important}

does override the inline style, but adding the !important back to the span works fine.

<span style="color: #ffffff !important;" >

For understanding it better. Learn here Overwriting Hover in anchor Overwriting visited in anchor

Blockquote

Upvotes: 0

Kyojimaru
Kyojimaru

Reputation: 2724

Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this

.leftbar {
  float: left;
  width: 20%;
  background: #ccc;
}

a { /*think of this as default link style*/
  color: black;
}

#main div:not(.product-desc) a {  /*more specific selector*/
  display: block;
  color: red;
}

a { /*this one is from eBay*/
  color: green;
}
<div id='main'>
  <div class='leftbar'>
    <a>Hello</a>
    <a>World</a>
  </div>
  <div class='product-desc'>
    <a>Description</a>
    <a>Product</a>
  </div>
</div>

You can use a :not selector to define your main style so it won't be disrupted by the eBay style

The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black

Upvotes: 1

Related Questions