1

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.

Plamen Penchev
  • 357
  • 1
  • 5
  • 15
  • 1
    Does this answer your question? [Remove inline css of an HTML elements](https://stackoverflow.com/questions/14383668/remove-inline-css-of-an-html-elements) – ATP Jan 18 '21 at 08:09
  • No, I don't want to remove the external css styles, becase It will effect a whole product description, but I want to keep it the same as from ebay. – Plamen Penchev Jan 18 '21 at 08:16
  • hey, can you explain a little more, do u want to keep the styles coming from ebay and your personal styles at the same time? if not u can use javacsript to remove the inline styles of the html coming from ebay products – Zia Ahmad Jan 18 '21 at 08:18
  • I have two option, ebay Api with php, and second way is node js crawler, the idea that came to my mind, right now is to get all styles attribute from all elements and after that put them to to top of the page with some class, and this way I think will fix my issue – Plamen Penchev Jan 18 '21 at 08:21
  • So what do you want to remove? what do you want to keep? – ATP Jan 18 '21 at 08:22
  • Nothing I want to keep both, but my styles to be for the website, and ebay styles to be for the product description, that's all – Plamen Penchev Jan 18 '21 at 08:23
  • you want some elements to be "immune" from ebay's styles? – ATP Jan 18 '21 at 08:26
  • Yes, I want my styles to be "immune"from ebay's styles – Plamen Penchev Jan 18 '21 at 08:27

3 Answers3

1

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

Kyojimaru
  • 2,694
  • 1
  • 14
  • 22
0

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

Badal S
  • 507
  • 1
  • 3
  • 20
0

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

  all: initial;
ATP
  • 2,939
  • 4
  • 13
  • 34