How can you modify the html style without changing the html

Question

I know it might sound awkward and kind of rookie, but still.

So the problem is a have a site on CMS with no acces to html source code (i know you could that, by searching for that specific .php file but it is a bit too much), and have to change some of it's elements style.

This is how that div i must modify looks like:

<div class="tg-feature-product-widget element-item uxdesign tg-column-3 portfolio "
 data-category="portfolio " style="position: relative; left: 359.95px; top: px;left: 500px;"><figure><img>

blah blah blah

There is that annoying style i can't acces within F12 moreover the class can't be accessed with

.tg-feature-product-widget element-item uxdesign tg-column-3 portfolio{

in CSS (i do not exclude that i might not know how to access such complicated stuff).

So how do i change it's style?

`.tg-feature-product-widget.element-item.uxdesign.tg-column-3.portfolio{` — Mr T, Mar 12 '21 at 14:31
Inline styles can only be overwritten externally by `!important` ([Relevant question](https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css)) — DBS, Mar 12 '21 at 14:33
Without seeing more of your HTML structure we can't say for sure, but the selector @MrT has commented should do it. — DBS, Mar 12 '21 at 14:35
But what should i do if i literally have 3 same class objects in there, how do i acces each. That part worked for me, once again big thank u — AppleCidar, Mar 12 '21 at 14:38

score 1 · Answer 1 · answered Mar 12 '21 at 14:46

1

You can access it like so: .tg-feature-product-widget.element-item.uxdesign.tg-column-3.portfolio Thats how the CSS selectors work

 <div class="element top"> //first div

</div>

<div class="element"> //second div
    <div class="top"> //third div

    </div>
</div>


.element.top{
    //Selects the first div aka every div with the class element AND top
}

.element{
    //Selects the first and second div aka every div with the class element
}

.element .top{
    //Selects the third div nested in the second div aka every div with the 
     class top thats nested in a div with the class element
}

answered Mar 12 '21 at 14:46

Lukas Walter

41
3

Thank you a lot, but you could you check the screenshot i added, how could i acces each of those if their names are the same, the only thing that is different is the img link. – AppleCidar Mar 12 '21 at 14:50
Thats gonna be ugly with no acces to the html but possible. Read the second answer on that question thats exactly your problem: https://stackoverflow.com/questions/2751127/how-to-select-the-first-second-or-third-element-with-a-given-class-name Just have in mind that if the order of the elements change your css wouldn´t acess the right elements anymore – Lukas Walter Mar 12 '21 at 14:54

How can you modify the html style without changing the html

1 Answers1