How to target one widget on my Wordpress homepage without effecting other sections?

Question

I am having trouble changing the styles of a widget on my Wordpress site.

The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."

The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.

I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.

I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.

Any tips on how to target this widget independent of the other sections?

Answer 1

在这个完整的案例中，你可以用：

.widget:last-child {
    /* your rules */
}

因为这是部分id =“main”的最后一个孩子。

或使用其ID：

#text-3 {
    /* your rules */
}

Answer 2

通常，wordpress小部件在wp-content / plugin中都有自己的样式css文件和插件的名称。 无论如何，如果您在Web浏览器上打开开发人员工具并单击要更改的元素，您将找出要使用的选择器。 对开发人员工具进行一些测试，然后对文件进行更改。

Answer 3

Okay. I solved it. Let's see if I can explain.

First, I changed the #content container to:

body.home #content.col-full {
    max-width: 100% !important;
}

This of course expanded the full container.

Then I was able to style individual widgets as needed.

It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:

1. Didn't know how to target only the home page (body.home)
2. Didn't see that the container was #content
3. Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately