Changing a rule from id to class breaks it

HTML & CSS
1

Could someone help me with this? I’m not sure why it’s happening.
I’m placing images on the side of Un-ordered lists on several pages. I’ve using an id to define the style and everything has been working fine. Well just recently I thought a class would work better so I went ahead and changed a it to a class. I made the appropriate edits in my css file and in my html as well. The result was it just stopped working. Using the Web Developer add-on the new class doesn’t even show.
The page I’m editing is http://www.nosaintshistory.com/1981-new-orleans-saints-statistics/. I’ve tried out several combinations already. The latest is:

.entry-content ul .sidebar_pics { width: 234px; float: right; margin: 4px; margin-left: 0; }
.sidebar_pics li { width: 228px; margin: 0 auto; list-style: none; }
.sidebar_pics img { max-width: 226px; text-align: center; }

And the html is:

<ul class="sidebar_pics">
	<li>[caption id="attachment_9045" align="aligncenter" width="493"]<img src="http://www.nosaintshistory.com/wp-content/uploads/2017/10/rickey-jackson-glenn-redd-tackle-against-pittsburgh-steelers.jpg" alt="Rickey Jackson and Glenn Redd make a Tackle Against the Pittsburgh Steelers" width="493" height="700" class="size-full wp-image-9045" /> Rickey Jackson and Glenn Redd[/caption]</li>

</ul>

Please let me know what I’m doing wrong.

2

What is this?

1 Like
3

That is targeting an element with class sidebar_pics which is a descendant of a ul. If you mean a ul with a class of sidebar_pics, you need to remove the space - ul.sidebar_pics.

(You may not need all that; just .sidebar_pics may be enough to target that element, but without the rest of the page I can’t say for certain.)

4

That’s the caption that Wordpress assigns to the image.
I’m just using the “Insert Media” option.

5

OK, tried just .sidebar_pics and that didn’t work.

And .entry-content is a div. And the CSS does have .entry-content ul defined.
I guess I could try removing the space-ul.sidebar_pics, but what about any future lists I put on the site?

And again, what gets me is if the exact same rules are applied with an id it works just fine.

6

Sorry - I’m not quite following.

If you need all those selectors in, then it should be .entry-content ul.sidebar_pics, not .entry-content ul .sidebar_pics. Did you try that?

1 Like
7

Oh, I think I see what you mean.
I’m pretty sure I did try that but I’ll go back and try it again.

8

OK I tried that and still doesn’t work.
My css-

.entry-content ul.sidebar_pics { width: 234px; float: right; margin: 4px; margin-left: 0; }
.entry-content ul.sidebar_pics li { width: 228px; margin: 0 auto; list-style: none; }
.entry-content ul.sidebar_pics img { max-width: 226px; text-align: center; }
9

Sorry - I’m still confused. Which part isn’t working? I’ve looked at the link you gave in your first post and the styles seem to be applied as expected.

1 Like
10

Those styles are all being applied and are shown in the devtools.

1024×744 292 KB

4 Likes
11

Your right. It is working.
I looked at it in a different browser and it is working. I went back to the original browser - Vivaldi - and had to clear the cache before I saw the changes.

Anyway, thanks.

2 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.