DIVI SELECTORS

FOR DIVI SPACE ACADEMY

By Stephen SJ James
DIVI SELECTORS

Contents

Foreword ……..…………………………………………….. 3

Using selectors …………..………………………………. 4

Sections, Rows & Columns ………………………… 5

Header & Footer ………………………………………… 8

Accordion …………………………………………..……… 15

Audio ………………………………………………………….. 17

Bar Counters ……………………………………………… 19

Blog …………………………………………………………….. 20

Blurb …………………………………………………………… 23

Call to Action ……………………………………………… 25

Circle Counter ……………………………………………. 26

Contact Form …………………………………………….. 27

1
Countdown Timer ……………………………………… 29

Email Opt In ……………………………………………….. 31

Portfolio ……………………….……………………………… 32

Gallery ………………………………………………………… 34

Image ………………………………………………………….. 35

Login …………………………………………………………… 37

Map …………………………………………………………….. 39

Number Counter ……………………………………….. 40

Person ………………………………………………………… 41

Pricing Table ………………………………………………. 43

Shop …………………………………………………………… 46

Slider ………………………………………………………….. 50

Tabs …………………………………………………………… 53

Testimonial ……………………………………………….. 55

Toggle ……………………………………………………….. 57

Video Slider ………………………………………………. 59

2
FOREWORD
Hey! Thanks for downloading your free ‘DIVI SELECTORS’ eBook.

One of the most common CSS issues to come up in the forums and social media
groups, is that targeting the elements that make up Divi’s modules can be a little
tricky. But struggle no more! With this resource, you now have access to the exact
selectors needed to change almost every element of the Divi Page Builder. Whether
you’re using Divi as a theme or a plugin, this is going to save you so much time!

Just so we’re on the same page, what exactly is a selector?

3
Using Selectors
CSS is made up of three main parts. If you inspect element on any web page you’ll
see these straight away…

THE SELECTOR
The selector is the exact series of classes, pseudo classes, ID’s and elements used
to target any on-screen elements. It can target lots of things at once, as in the
example above where all ‘img’ elements are being targeted, or it can be very
specific and target one, or a few things.

THE PROPERTY
The property is the ‘what’ you’d like to change with CSS. It could be one thing, like
colour. Or it could be lots of things like height, colour, border-radius, scale, angle
and a million other things.

THE VALUE
The value is the ‘change how?’ of the CSS. You can change the size of an element
with pixels, percentages or viewport measurements, or the colour etc.

A quick Google search for ‘CSS properties’ will show you a number of sites where
you can find the properties and values used in CSS, but the selectors used in any
theme or plugin are partly created by the developers. So this book is your
catalogue of selectors for the Divi Theme and Page Builder.

Use them to make CSS edits of your own…

4
Sections, Rows & Columns

SECTIONS
Sections are the largest part of the page builder. Rows and modules go inside
them.

.et_pb_section { }

ROWS
Rows make up the content inside a section, top to bottom.

.et_pb_row { }

COLUMNS
Columns make up rows, from left to right. Within the page builder, you’re given the
choice of 1, 2, 3 or 4 columns in any row.

5
To target all of the columns at once you can use:

.et_pb_column { }

Or you could target columns only IF there are three of them, like this:

.et_pb_column.et_pb_column_1_3 { }

Or only IF there are two of them like:

.et_pb_column.et_pb_column_1_2 { }

See how it works? The last number in the class changes to the number of columns
there are. Simple as that.

What if you don’t want your changes to be so broad?

I’ll bet that most of the time you don’t want changes to a section to affect EVERY
section. Or changes to a blurb header to affect EVERY blurb header. This is how you
can make your CSS more specific.

If you want to limit, the changes you’re making to a single section, just set a new
section class in the theme options.

6
Then you can replace the ‘section selector’ with the class you have created and
your CSS changes will only affect that section.

You can place a custom section or row class in front of all of the CSS selectors in
this book (with the exception of the header and footer selectors) to make the
changes more specific.

So .et_pb_blurb could be changed to .front-page-blurbs.et_pb_blurb and that would

mean only sections where ‘front-page-blurbs’ was added to the custom class
options, would be affected.

This is worth bearing in mind when using any of the selectors listed in this book.

7
Header and Footer

1. Main header before scroll

#main-header { }

2. Main header after scroll

#main-header.et-fixed-header { }

3. Logo

#Logo { }

4. Top Navigation

#et-top-navigation { }

5. Main Menu List Item

#top-menu li a { }

6. Main Menu Drop Down Arrow

#top-menu .menu-item-has-children > a:first-child:after { }

7. Search icon

#et_search_icon:before { }

8
Top Header

8. #top-header

Phone Icon

1. #et-info-phone:before { }

2. Phone number

#et-info-phone { }

3. Email Icon

#et-info-email:before { }

4. Email Address

#et-info-email { }

5. Facebook icon

.et-social-facebook a.icon:before { }

9
6. Twitter Icon

.et-social-twitter a.icon:before { }

7. Google + Icon

.et-social-google-plus a.icon:before { }

8. RSS Icon

.et-social-rss a.icon:before { }

9. Top Header Menu Item

#et-secondary-menu > ul > li a { }

10. Top Header Drop Down Arrow

#et-secondary-nav .menu-item-has-children > a:first-child:after { }

11. Cart

.et-cart-info span:before { }

12. Number of Items

.et-cart-info span { }

10
1. Top Navigation Sub Menu

#et-secondary-nav .sub-menu { }

2. Top Navigation Drop Down Link

#et-secondary-nav li li a { }

3. Top Navigation link with Drop Down

#et-secondary-nav .menu-item-has-children > a:first-child { }

11
1. Main Menu Drop Down Link

#top-menu .menu-item-has-children > a:first-child { }

2. Main Header Sub Menu Link

#top-menu li li a { }

3. Main Header Sub Menu

#top-menu .sub-menu { }

12
1. Footer Info Text

#footer-info p { }

2. Footer Links

#footer-info a { }

3. Facebook Icon Footer

#footer-bottom .et-social-facebook a.icon:before { }

4. Twitter Icon Footer

#footer-bottom .et-social-twitter a.icon:before { }

5. Google + Icon Footer

#footer-bottom .et-social-google-plus a.icon:before { }

6. RSS Icon Footer

#footer-bottom .et-social-rss a.icon:before { }

7. Icon Container Footer

.et-social-icons { }
13
8. Bottom Links Container

#footer-bottom .container { }

9. Mobile Menu Icon ( Hamburger )

.mobile_menu_bar:before { }

10. Mobile Menu Main Link

.et_mobile_menu .menu-item-has-children > a { }

11. Mobile menu Normal Link

.et_mobile_menu li a { }

12. Mobile Menu

.et_mobile_menu { }

14
Accordion

1. Open Accordion

.et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all

accordions)

2. Closed Accordion

.et_pb_accordion .et_pb_toggle_close { }

3. Accordion Closed Title

.et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }

4. Accordion Open Title

.et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { }

15
5. Accordion Content

.et_pb_accordion .et_pb_toggle_content { }

6. Accordion Plus Icon

.et_pb_accordion .et_pb_toggle_title:before { }

16
Audio

1. Cover Art

.et_pb_audio_cover_art { }

2. Audio Module

.et_pb_audio_module { }

3. Audio Title

.et_pb_audio_module_content h2 { }

4. Controls Container

.et_pb_audio_module .mejs-container .mejs-controls { }

5. Play Button

.et_pb_audio_module .mejs-controls .mejs-play button { }

17
6. Timer Control

.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-

handle { }

7. Time Slider

.et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-time-slider { }

8. Time Display

.et_pb_audio_module .et_audio_container .mejs-container .mejs-controls .mejs-time

span { }

9. Mute Button

.et_pb_audio_module .mejs-controls .mejs-mute button { }

10. Current Volume Bar

.et_pb_audio_module .mejs-horizontal-volume-current { }

11. Volume Bar Background { }

.et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-volume-

slider .mejs-horizontal-volume-total { }

18
Bar Counters

1. Full bar

.et_pb_counters .et_pb_counter_container { }

2. Amount

.et_pb_counters .et_pb_counter_amount { }

3. Title

.et_pb_counters .et_pb_counter_title { }

4. Counter Amount

.et_pb_counters span.et_pb_counter_amount_number { }

5. Entire Module

.et_pb_counters { }

19
Blog

1. Post

.et_pb_blog_grid .et_pb_post { }

2. Post Image

.et_pb_blog_grid .et_pb_image_container img { }

3. Post Title

.et_pb_blog_grid .et_pb_post h2 a { }

20
4. Post Meta

.et_pb_blog_grid .et_pb_post .post-meta { }

5. Post Meta Links

.et_pb_blog_grid .et_pb_post .post-meta a { }

6. Post Preview Text

.et_pb_blog_grid .et_pb_post p:not(.post-meta) { }

21
1. Full Width Blog

.et_pb_post { }

2. Full Width Blog Image

.et_pb_post a img { }

3. Post Title

.et_pb_post h2 a { }

4. Post meta Links

.et_pb_post .post-meta a { }

5. Full Width Post Preview

.et_pb_post p:not(.post-meta) { }

22
Blurbs

1. Entire Blurb

.et_pb_blurb { }

2. Blurb Icon

.et_pb_blurb .et-pb-icon { }

3. Blurb Text

.et_pb_blurb .et_pb_blurb_container { }

4. Blurb Title

.et_pb_blurb h4 { }

5. Blurb Icon Border

.et_pb_blurb .et-pb-icon-circle-border { }

23
6. Blurb Icon Circle

.et_pb_blurb .et-pb-icon-circle { }

7. Blurb Image

.et_pb_main_blurb_image { }

24
Call to Actions

1. Entire CTA Module

.et_pb_promo { }

2. CTA Title

.et_pb_promo_description h2 { }

3. Description

.et_pb_promo_description p { }

4. CTA Button

.et_pb_promo_button { }

5. CTA Button on Hover

.et_pb_promo_button:hover { }

6. CTA Arrow on Hover

.et_pb_promo .et_pb_button:after { }
25
Circle Counter

1. Circle Counter

.et_pb_circle_counter { }

2. Circle Counter Value

.et_pb_circle_counter .percent p { }

3. Circle Counter Title

.et_pb_circle_counter h3 { }

NOTE: Wondering why the circle and the colour aren’t included here? Those values
are set with JS using the ‘data-bar-bg-color’ and ‘data-number-value’ attributes.
That’s beyond my skill level…

26
Contact Form

1. Contact Form Title

.et_pb_contact_main_title { }

2. Name

.et_pb_contact_name { }

3. Email Address

.et_pb_contact_email { }

4. Message

.et_pb_contact_message { }

5. Captcha sum

span.et_pb_contact_captcha_question { }

27
6. Answer

.et_pb_contact_captcha { }

7. Submit Button

.et_pb_contact_submit.et_pb_button { }

8. Container

.et_pb_contact_form_container { }

28
Countdown Timer

1. Title

.et_pb_countdown_timer .title { }

2. Days Left

.et_pb_countdown_timer .days p.value { }

3. Day(s) label

.et_pb_countdown_timer .days p.label { }

4. Hour(s) label

.et_pb_countdown_timer .hours p.label { }

5. Minute(s) label

.et_pb_countdown_timer .minutes p.label { }

6. Second(s) label

.et_pb_countdown_timer .seconds p.label { }

29
7. Hours Left

.et_pb_countdown_timer .hours p.value { }

8. Minutes Left

.et_pb_countdown_timer .minutes p.value { }

9. Seconds Left

.et_pb_countdown_timer .seconds p.value { }

10. Separators

.et_pb_countdown_timer .sep { }

11. Entire Module

. et_pb_countdown_timer { }

30
Email opt-In

1. Module

.et_pb_newsletter.et_pb_subscribe { }

2. Title

.et_pb_newsletter_description h2 { }

3. Description

.et_pb_newsletter_description:not(h2) { }

4. Name

.et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { }

5. Email Address

.et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { }

6. Button

.et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }
31
Portfolio

1. Overlay

.et_pb_portfolio_image .et_overlay { }

2. Image

.et_pb_portfolio_image img { }

3. Portfolio Icon

.et_pb_portfolio_image .et_overlay:before { }

To override the current logo you need to find a new one and place it between
speech marks using the content property like this:

.et_pb_portfolio_image .et_overlay:before { content: “code here” }

To find the different icon codes look here.

32
4. Title

.et_pb_portfolio_image h3 { }

5. Portfolio Meta

.et_pb_portfolio_image p.post-meta { }

6. Module

.et_pb_fullwidth_portfolio { } /** For full-width portfolio **/

.et_pb_portfolio_grid { } /** For grid portfolio **/

33
Gallery

1. Overlay icon

.et_pb_gallery_image .et_overlay:before { }

2. Gallery Grid Title

.et_pb_gallery_grid .et_pb_gallery_title { }

3. Overlay

.et_pb_gallery_image .et_overlay { }

4. Image

.et_pb_gallery_image { }

34
Image

1. Image background in lightbox

.mfp-bg { }

2. Image in lightbox

img.mfp-img { }

3. Close X

.mfp-image-holder .mfp-close { }

35
4. Image

.et_pb_image { }

36
Login

1. Login Module

.et_pb_login { }

2. Title

.et_pb_login h2 { }

3. Description

.et_pb_login .et_pb_newsletter_description:not(h2) { }

4. Username

.et_pb_login #user_login { }
37
5. Password

.et_pb_login #user_pass { }

6. Forgot Password Text

.et_pb_login .et_pb_forgot_password { }

7. Submit Button

.et_pb_login .et_pb_newsletter_button { }

38
Map

1. Map Module

.et_pb_map_container { }

2. Map Pin

The pin styling is not set with CSS. You can learn how to change it using this pretty
cool article by Dan Mossop.

39
Number Counter

1. Number Counter

.et_pb_number_counter { }

2. Number

.et_pb_number_counter span.percent-value { }

3. Number Counter Text

.et_pb_number_counter h3 { }

4. With Percentage

.et_pb_number_counter .percent { }

40
Person

1. Person Module

.et_pb_team_member { }

2. Image

.et_pb_team_member_image img { }

41
3. Name

.et_pb_team_member_description h4 { }

4. Position

.et_pb_member_position { }

5. Description

.et_pb_team_member_description { }

6. Facebook

.et_pb_team_member .et_pb_facebook_icon { }

7. Twitter

.et_pb_team_member .et_pb_twitter_icon { }

8. Google +

.et_pb_team_member .et_pb_google_icon { }

9. LinkedIn

.et_pb_team_member .et_pb_linkedin_icon { }

All social media icons can be targeted at once with: .et_pb_team_member

.et_pb_font_icon { }

42
Pricing Table

1. Header Section

.et_pb_pricing_heading { }

2. Featured Table

.et_pb_pricing_table.et_pb_featured_table { }

3. Pricing Section

.et_pb_pricing_content_top { }
43
4. Price

.et_pb_pricing_table .et_pb_sum { }

5. Per Year

.et_pb_pricing_table .et_pb_frequency { }

6. Dollar Sign

.et_pb_pricing_table .et_pb_dollar_sign { }

7. List Item

.et_pb_pricing_table ul.et_pb_pricing li { }

Or when not available

.et_pb_pricing_table li.et_pb_not_available { }

8. Button

.et_pb_pricing_table_button { }

9. Pricing Title

.et_pb_pricing_heading h2 { }

10. Best Value

.et_pb_pricing_table .et_pb_best_value { }

44
11. Pricing Top

.et_pb_pricing_content_top { }

12. Standard pricing Table

.et_pb_pricing_table { }

45
Shop

1. Product

.et_pb_shop .product { }

2. Overlay

.et_pb_shop .product .et_overlay { }

And Image

.et_pb_shop .product img { }

3. Sale

.et_pb_shop .woocommerce span.onsale { }

46
4. Price

.et_pb_shop span.amount { }

5. Title

.et_pb_shop .woocommerce ul.products li.product h3 { }

6. Star Rating

.et_pb_shop .woocommerce ul.products li.product .star-rating { }

7. Deleted price

.et_pb_shop .woocommerce ul.products li.product .price del { }

8. New Price

.et_pb_shop .woocommerce ul.products li.product .price ins { }

47
1. Product Image

img.attachment-shop_single { }

2. Product Title

.product_title { }

3. Shop Price

.entry-summary p.price span { }

4. Description

.entry-summary p:not(.price) { }

5. Product Meta

.product_meta { }

6. Quantity

.woocommerce div.product form.cart div.quantity { }

7. Button

.woocommerce .product .cart .button { }

8. Tabs

.woocommerce .product .woocommerce-tabs .tabs li { }

48
9. Tab Titles

.wc-tab h2 { }

10. Tab description

.wc-tab p { }

11. Tabs ALL

.wc-tabs-wrapper { }

49
Slider

1. Previous Slide

.et_pb_slider .et-pb-arrow-prev { }

2. Next Slide

.et_pb_slider .et-pb-arrow-next { }

3. Active Slide

.et_pb_slide.et-pb-active-slide { }

4. Slide Image

.et_pb_slider .et_pb_slide_image img { }

5. Slide Description (This usually controls the height of the slider)

.et_pb_slider .et_pb_slide_description { }

50
6. Slide Title

.et_pb_slide_title a { }

7. Slide Text

.et_pb_slide_content { }

8. Slide Button

.et_pb_slider .et_pb_button { }

9. Active Slide Dot

.et-pb-active-control { }

10. All dots

.et-pb-controllers a { }

*It is possible to target the dot navigation individually like so…

.et-pb-controllers a:nth-child(1) { }

.et-pb-controllers a:nth-child(2) { }

.et-pb-controllers a:nth-child(3) { }

51
It is also possible to target the slides individually like so…

.et_pb_slide.et_pb_slide_1 { }

.et_pb_slide.et_pb_slide_2 { }

.et_pb_slide.et_pb_slide_3 { }

52
Tabs

1. Tabs Module

.et_pb_tabs { }

2. All tabs (inside)

.et_pb_tabs .et_pb_all_tabs { }

3. Tab Controls

.et_pb_tabs .et_pb_tabs_controls { }

4. Tabs content

.et_pb_all_tabs .et_pb_active_content { }

5. Active Tab

.et_pb_tabs li.et_pb_tab_active { }

53
6. Tabs List

.et_pb_tabs li.et_pb_tab_0 { }

.et_pb_tabs li.et_pb_tab_1 { }

.et_pb_tabs li.et_pb_tab_2 { }

Tabs are ordered from the 0 to the last, even if you have two or three on one page.
So if you had two tab modules on a page and the first one had three tabs then the
first tab of the second one would be ‘tab_3’. Make sense?

54
Testimonials

1. Testimonial Module

.et_pb_testimonial { }

2. Testimonial Portrait

.et_pb_testimonial_portrait { }

3. Description

.et_pb_testimonial_description_inner { }

4. Author

.et_pb_testimonial_author { }
55
5. Meta

.et_pb_testimonial_meta { }

6. Meta Links

.et_pb_testimonial_meta a { }

56
Toggle

1. Toggle Open

.et_pb_toggle.et_pb_toggle_open { }

2. Toggle Closed

.et_pb_toggle.et_pb_toggle_close { }

3. Toggle Open Title

.et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_title { }

4. Toggle Text

.et_pb_toggle_content p:last-of-type { }

5. Toggle to close

.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { }

57
6. Toggle Close Title

.et_pb_toggle_close h5.et_pb_toggle_title { }

7. Toggle Closed Title

.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { }

58
Video Slider

1. Video

.et_pb_video_slider .et_pb_video_wrap { }

2. Video Overlay

.et_pb_video_slider .et_pb_video_overlay_hover { }

3. Carousel Item

.et_pb_video_slider .et_pb_carousel_item { }

59
4. Carousel

.et_pb_video_slider .et-carousel-group { }

END

Code Is Beautiful

60