CSS 101: What are ID and Class?

Two things you need to get into a bar, and two things you need to understand to build in Divi.

When you need to apply custom styling in Divi, figuring out when and how to use ID and CLASS selectors is the first step.

ID Selectors
Start with a # (hash), like #id-selector
Can be set on only one unique element
Only one can be set per element
Are perfect for styling the odd duck

CLASS Selectors
Start with a . (dot), like .class-selector
Can be set on multiple elements
Multiple classes can be set per element
Are perfect for styling a re-used element

Example of Using ID Selector

You’re using the blurb module across a 3 column row, but one of your blurbs has a bit more text and it throws off the alignment. You can add an ID under CSS ID and make your custom settings in Divi Settings Custom CSS.

#shrink-blurb-words {
font-size: .7em;
}

In the more recent versions of Divi this type of use is deprecated, as each element has within Divi the ability to set custom CSS right in the module. Usually this works, however there can be some specific cases where the old way may be necessary.

Example of Using CLASS Selector

You’re using the Person module to display a number of employees, and you want them all to have round images. You can use the class “et_pb_team_member_image” to set a border-radius: 50%; on all of the Person module images.

.et_pb_team_member_image {
border-radius: 50%;
}

Suppose you are using the Person module in multiple ways, and only on one set of Persons do you want the photo to be round. You could add the CSS class “round-head” to the Divi settings for the Person modules, and make your custom settings in Divi Settings Custom CSS for the class.

.round-head .et_pb_team_member_image {
border-radius: 50%;
}

I’m sure you’re crafty enough to notice that I strung together two classes there. Why? Because when you set a custom CLASS in Divi, it applies to the entire module, and we want to select the Image element descendant of that module.

Hope this helps! Feel free to post questions!

CSS 101- What are ID and Class-

[et_pb_shop admin_label=”Shop” type=”sale” posts_number=”8″ columns_number=”0″ orderby=”menu_order”] [/et_pb_shop]

Russell Mann

Russell Mann has been developing websites since 1997 on a number of platforms, starting with notepad.exe and Front Page. He built a custom CMS before it was cool, trading up to community source platforms like Drupal and WordPress. Lately he's been building everything in Divi, including sub work for everything from his family's businesses to Silicon Valley firms.

3 Comments

Millard on 27/10/2016 at 8:16 am

OK, so I added the following class to the custom class CSS in the person module:

round-head

and the following into my css style sheet

.round-head .et_pb_team_member_image {
border-radius: 50%;
}

and I get nothing. Tried numerous times. Any ideas?

Millard

Andrew Palmer on 27/10/2016 at 2:22 am

Hi Randy, thanks for your comment. I am sorry you had issues with the math question and not being able to post a comment effectively. Lets turn a negative into a positive if we can. Our site receives hundreds of thousand of page views a month, some of those page views are spammers trying to get in and leave spammy reviews, offensive remarks and of course bad links and even maybe trying to hack into our site. The positive is that we have a good commenting system that locks these people out. The negative is that anyone posting a comment must put in a math capture – we feel that is better than a google type captcha in as much as it is a simple math question and in an effort to protect our site, our readership and our content – its our preferred method.

As to the blog post, content – we feel it adequately explains the css 101 question of what is a css class and what is a cssid.

Randy on 26/10/2016 at 4:03 pm

I have tried FOUR times to reply to this blog.
Perhaps I needed to be logged in first?
If so, why not tell me so instead of telling my captcha was wrong?
Why allow me to even fill anything in?

So, I’m trying again to get through to you.
_______________

YOU POS PEOPLE>

I have twice had my comments deleted because your captcha is incapable of doing math correctly.

Here’s what I said (this time I copied in case it did it again, although I’m certain it will once again be deleted and I’ll really be pissed off):

I entered an entire, well-written comment and because I must have done my captcha math wrong, my entire comment was deleted because you wanted me to try again.

While I can appreciate bad math not being acceptable, certainly there’s a way to NOT delete my comments.
Who makes a copy of their comments on the off chance the site might deleted it for not getting a passing grade.

Really annoying.

I may or may not try to duplicate my comment.

But the essence of it was that the blog on ID and Class was very poorly explained.

Maybe now I see why.