The Divi CSS and Child Theme Guide
2nd Edition
www.divi.space

Introduction
If you’re a Divi user and are interested in improving your web design skills, then this eBook is for you. The Divi CSS and Child Theme Guide provides a guide to the CSS selectors used in the Divi theme framework.
One of the most common CSS-related queries we see in various online forums and in the Divi community groups is the targeting of the elements that make up Divi’s modules. The Divi CSS and Child Theme Guide from Divi Space will help you understand the various elements of each module and show you how to isolate and customize them to fit your overall web design aesthetic.
THIS GUIDE COVERS:
- What CSS is and why you should learn it
- What a child theme is and why it should be used in your web development process
- A thorough guide to working with Divi child themes
- Various ways that you can add custom CSS to your Divi website
- CSS selectors and how to target elements
- Divi-specific CSS selectors
- How to test and troubleshoot CSS changes
- CSS resources for further learning
ABOUT AUTHOR:

Stephen James
Stephen James is a UK based web developer whose name is synonymous with Divi. An early adopter of ‘Divi as a framework’, his easy to follow tutorials and Divi extensions have saved thousands of designers from hours of pain.

Lisa-Robyn Keown
Lisa-Robyn Keown is a copywriter and brand strategist from Cape Town, South Africa. She specializes in writing Divi, WordPress and web design related content.
Special thanks to our guest contributors Randy A Brown and John Anderson.

About Divi Space
With years of WordPress design and development expertise, Divi Space helps Divi website creators achieve their online branding and communication goals. Boasting a growing portfolio of premium products, Divi Space offers expertly written plugins for Divi, WordPress and WooCommerce, child themes for both the Divi and Extra themes, and online courses created to help Divi users advance both their development skills and business acumen.
Part One:
Introduction to CSS
What is CSS
CSS stands for Cascading Style Sheets, with emphasis on the word cascading. CSS is a development syntax that, when written and applied to an HTML element, will give the element a new look and feel.
If you think of HTML as the content and general structure of the website, then think of CSS as the design style that influences various aspects of these elements. CSS styling can enhance various web elements such as color, style, font size, margins, padding and much more.
CSS is written or compiled in an Integrated Development Environment (IDE), such as Sublime or Brackets. CSS can also be written using a text editor.

A OVERVIEW OF BASIC CSS TERMINOLOGY
-
- CSS commands are two-fold. CSS is comprised of:
- The selector: this defines which HTML element in your website you’d like to style, and
- The declaration: this is the actual styling itself, broken down further into:
- The property: this is the aspect of the HTML element you’d like to change (i.e. would you like to change the color, font-size, border-width of the element),
- The value: this is the style variation you’d like to apply (i.e. the color property becomes green or blue, the font-size property becomes 12px or 20px etc.)
The use of the word ‘cascading’ in CSS relates to the order in which commands are executed. In CSS, commands are run from the bottom up. In other words, commands written at the top of a CSS file (stylesheet) can be overridden by another command issued further down, either in the same stylesheet or in another linked CSS file.
It is important to give consideration to the order of things when writing CSS. Without diverting too much, as we’ll cover this later, it’s worth noting that another level of prioritization can be added to an element using either CSS Classes or IDs. Classes and IDs are selectors that can be used to diversify elements and the styling thereof even further. If you’re familiar with the Divi Builder, you would have noticed ‘CSS Class’ or ‘CSS ID’ in the Advanced tab.
We’ll return to these and other CSS terms and concepts later in The Divi CSS and Child Theme Guide.
Why You Should Learn CSS
Even though Divi requires no knowledge of code, designers will find their websites a step above the rest by gaining an understanding of CSS.
Divi’s out-of-the-box aesthetic is generally appealing, although some users may want to create a more unique look and feel for their website. The modules of the Divi Builder can be styled and customized using in the various settings in the Design tab. Beyond this, the Custom CSS tabs offer the ability to add CSS styling to each module. While this may suffice for small tweaks, if you’re looking to create a particular look and feel for your website, or wish to add more personalization, you’ll need to become familiar with CSS.
While there are hundreds of articles written about CSS in the general sense, there aren’t all that many that have been adapted specifically for use with the Divi framework or Divi plugin.
CSS for Divi
Our goal with The Divi CSS and Child Theme Guide is to make sure that Divi users understand the basic underlying principles of CSS. If you are a Divi user, it should be a priority to learn the ins and outs of the syntax in relation to the HTML elements used in the Divi framework.
What we will learn
The eBook aims to give you a deeper understanding of CSS as a syntax. It’ll discuss:
- Divi child themes and using stylesheets
- Adding custom CSS to your Divi website
- CSS selectors and Divi-specific CSS
- Troubleshooting CSS
- CSS resources
Like anything in life, learning a new skill can be overwhelming in the beginning, but if you’re ready for the challenge, you’ll transform the nature of your business for the better.
Not only will learning CSS help your immediate web design projects, but it’ll also have a serious, positive impact on your career. You’ll be able to accept more challenging web builds and charge more for your services.
Learn CSS with Divi Space
If you’re ready to become a rockstar Divi designer, learning CSS is the next step, and who better to learn this incredible skill set with than Divi Space!
BUILD POWERFUL WEBSITES
Created to help Divi users excel in their craft, the Divi Space online course, Transforming Divi with CSS & jQuery, will give learners deep insight into the fundamentals of CSS and jQuery to be able to begin building visually striking and functionally powerful Divi websites.
As well as learning core CSS and jQuery principles, specifically for use with the Divi theme, the Transforming Divi with CSS and jQuery online course will also take learners through the step-by-step process of building a website from start to finish. Here, learners will see these two powerful code bases, CSS and jQuery, in action.
Upon completion of the course, students will become a Certified Divi Frontend Developer, equipped with the skills to build exceptionally powerful and unique Divi websites. With the accreditation, learners will receive both a digital certificate as well as a badge that can be displayed on their website.
Learn more about our Transforming Divi with CSS & jQuery online course and kickstart your web design career!
Part Two:
Child Themes
An Introduction to Child Themes
Before diving into CSS, it’s important to mention that it is deemed as best practice to use a child theme when building a Divi website. The details and functionings of child themes will be described in detail later in this guide, for now, simply note that the use of child themes in development is considered best practice.
Child themes are comprised of a series of files. CSS edits are stored in a stylesheet. Using a child theme entails setting up a stylesheet to house all of your styling edits. This way, site edits will be preserved and won’t be overwritten when a theme update rolls around. This concept is explained in detail further in this guide.
WHEN YOU DON’T NEED A CHILD THEME
If you know for certain that you won’t be making any customizations to your Divi website, then you don’t need to worry about using a child theme. For those wanting to skip the child theme step but still preserve their site changes, Divi allows users to add CSS in a number of areas:
- CSS can be added to the Custom CSS area in the Divi Theme Options > General tab
- Quick, simple aesthetic changes can be added to the sections, rows and individual modules themselves (in the Advanced > Custom CSS tab of each)
- Each page, project or post can be individually styled using the Divi Builder Settings console
These three areas for adding CSS will only suffice for small CSS tweaks and code enhancements that you can keep track of easily. If you are looking to make in-depth changes to your website, a child theme is essential.
For further reading, visit the WordPress Codex and read through the literature on Child Themes.
Build a Divi Child Theme for Free!
If you’re ready to create a blank child theme for your Divi website, check out the Divi Space Child Theme Builder. Free to use, the Divi Space Child Theme Builder makes creating a blank Divi child theme quick and easy. To create a child theme, all you need to do is enter information relating to your Divi site, download the child theme and install it. To build a Divi child theme, use the Divi Space Child Theme Builder now!
What is a Child Theme?
“A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.” – WordPress Codex
Before unpacking what a child theme is, it’s important to understand what a parent theme is and also the relationship between the two entities.
PARENT THEME
Intricately developed by either an agency, company or individual, a parent theme comes fully packaged with all of the relevant code files and WordPress-ready functionality required for building a website. Any theme that you purchase via a theme marketplace such as Envato Market, or from a vendor such as Elegant Themes, would be deemed as a parent theme. If you’re a Divi user, then Divi itself will be the parent theme.
CHILD THEME
A child theme is a separate entity to the parent theme that can be created or purchased via third- party developers.
HOW A CHILD THEME WORKS
A child theme uses a series of various .php functions and WordPress optimized commands and hooks to call on the full functionality of the parent theme. This process is called enqueueing the parent theme. This basically means that the child inherits its functionality from the parent theme, and essentially “piggybacks” off of it.
When WordPress runs, it first looks to the files present in the child theme and executes the code it finds. If the files are not present in the child theme, it executes the commands found in the parent theme.
If you’ve created a header.php or footer.php file within a child theme, WordPress would execute the code found in the child theme. The only file that WordPress doesn’t prioritize child over parent for, is the functions.php file. In this regard, WordPress executes the code found in both files.
Although the child theme is given the space to take on a life of its own, it still only exists because of the parent theme, and only works if the relationship is set up correctly. This is why enqueueing the relevant functions must be done so with care.
Why Do I Need to Use a Child Theme?
Using a child theme gives you the space to make powerful aesthetic or functional changes to your Divi website. Technically, these changes can be made to the core files of the parent theme, but this is extremely risky as:
- You might break something in the code, and
- Theme updates will wipe out all of your edits.
Making use of a child theme ensures that you can make site updates in a 100% fool-proof and safe manner, and too, enjoy some time-saving conveniences for your later web builds by copying code between stylesheets.
CODE BREAKS
If you’ve ever looked at Divi’s core theme files, you’re bound to notice the millions of lines of code. For really advanced WordPress users, editing this code might be relatively easy, but for the general populace who aren’t 100% code savvy, who WordPress and Divi were made for, these lines and lines of code can be overwhelming.
Code is written in such an intricate manner that something as simple as adding a punctuation mark in the incorrect place will completely throw the entire operation off, rendering your theme, and website, broken.
If you want to tinker around with code, be it CSS or PHP related edits, using a child theme will grant you this space. With a child theme, you can play around to your heart’s content without creating any vulnerabilities in the core (parent) theme’s files.
THEME UPDATES
At various stages along the way, theme development agencies or creatives will decide to update their themes. These may be major updates such as theme version updates, or smaller ones such as bug fixes and minor improvements.
During a theme update, the theme developers will reassess the current version of the code present in the theme, and, if required, will make relevant changes or additions where deemed fit. As soon as the theme’s code is updated by the theme developer and is updated by the theme user, the parent theme files are essentially reset, and any code edits present will be overwritten. If you have made code changes to the parent file, you’re guaranteed to lose all changes and edits you’ve made.
Child themes solve this dilemma. If updates occur to the parent theme, your child theme will not be affected as it runs as a separate entity. As your child theme would have enqueued the parent theme, the relevant updated code will still reflect in the parent theme, but will not overwrite any changes set within the files of your child theme.
CONVENIENCE
With Divi’s versatile and robust nature, making aesthetic enhancements to a website is easy. Various modules can be assembled, each with a collection of different settings to style their appearance and function.
While styling each individual module is a good method for some, particularly users who require an easy- insert-and-edit option, others may find this process tedious as keeping track of the small nuances set within each individual model can be a pain. Small CSS tweaks can easily be added to the Divi Theme Options console, but using a child theme and the respective files make this process much easier.
In summary: using a child theme will not only save time in design and development, but you’ll also be able to save and reuse the files for later web development projects.
How to Create a Child Theme
Setting up a child theme for a Divi website is simple. You could either use our child theme builder, purchase our Aspen Roots child theme, use a premium child theme, or, create your own. Each of these methods will suffice for building websites with Divi.
1. USE A CHILD THEME BUILDER
The Divi Space Child Theme Builder is a free, nifty tool that is incredibly easy to use. To create a child theme, all you have to do is enter your details in the text area boxes provided and all of the relevant files will be generated for you.
Once complete, your child theme will be sent to you via mail. After you’ve downloaded the child theme, simply upload the .zip file to your theme console on the WordPress dashboard, following the installation and activation of the parent (Divi) theme.
2. USE A PLUGIN
To make the process even easier, you could create a child theme by using a plugin. We recommend using the One-Click Child Theme plugin. After download and install, One-Click Child Theme will appear as another menu item within the Appearance tab on your WordPress Dashboard. Once here, simply give your child theme a new name and description and click “Create Child”. Once complete, you’ll have a blank child theme running on your Divi website.
3. USE THE ASPEN ROOTS CHILD THEME
Another extremely easy way to create a child theme is to use our Aspen Roots child theme. The Aspen Roots child theme ships with all of the already scripted files, including style.css, functions.php, footer.php, which will, after activation, automatically install to your WordPress website. The Aspen Roots child theme can be purchased from our store here
4. USE A PREMIUM DIVI CHILD THEME
If you’re looking to speed up your Divi web development process, a premium child theme may be the perfect solution for you. As well as the main child theme files, functions.php and style.css, premium child themes come complete with all of the bells and whistles already complete.
With premium child themes, both the web design and development is already complete. From layout design to element styling, font and color selection, and in most cases, animations too, practically every detail of the web design and development process is taken care of, all the user has to do is enter their original content.
Divi Space offers a collection of premium child themes for Divi. Spanning all categories, including entertainment, e-commerce, various forms of business and more, our child themes ship with a plethora of highly advanced features including online stores, forums, events calendars and much more.
To speed up your web development process, look no further than our high-quality, top-rated premium Divi child themes. As well as premium child themes, we offer a free Divi child theme called Divi All Purpose. Divi All Purpose has been designed to help brands and businesses create a single display or brochure website with very little effort. Versatile and designed to cater to a span of industries, business types, brand identities and objectives, Divi All Purpose can be downloaded for free here.
5. CREATE YOUR OWN CHILD THEME
It’s easy to create a child theme for Divi. All you’ll need is the correct tools and a bit of patience. If you’re interested in exploring and understanding what goes into a child theme, i.e. which file serves which purpose and so on, it might be a good idea to try out the process and gain even more knowledge for your web development practices.
We’ve broken down the process of building a child theme into a step-by-step guide in the following section.
How to Create a Divi Child Theme From Scratch
Building a child theme from scratch is a simple process. All a child theme is, is a series of files, typically, a:
- functions.php file,
- style.css file, also called a stylesheet, houses all of the website’s aesthetic enhancements,
- any other particular files you’d like to include unique code in, that’ll override the code in the main parent
theme files.
To create the files required for the child theme, you’ll need either an IDE (integrated development environment) or a text/source code editor.
The source code editor, TextEdit (Mac) or TextEditor (PC), will come already installed on your computer, while the IDE’s will need to be downloaded from the internet and installed on your computer. Two of the most popular, standard editors are Brackets and Sublime. Both are free to download, easy to use and include color cues to make code easy to script up and identify.
Before diving in and creating each file, you’ll need to allocate a theme directory for the child theme within the WordPress installation.
CREATE A CHILD THEME DIRECTORY
The child theme directory will be the folder that’ll house all of the files of your child theme.
To begin, create a new folder on your computer and name it something related to your project. The child theme directory should be named something easily identifiable, something that can easily relate to your client. When naming the child theme directory folder, do not include spaces between the words, instead, use hyphens or remove spacing altogether, ie. Divi-Child-Theme or DiviChildTheme.
As you create the individual files, add them to the child theme directory. Once all of the files have been added, you can then add the child theme to your website, described in detail in the How to Install a Divi Child Theme? section.
STYLE.CSS
To create the stylesheet for your child theme, create a new file in your IDE or Text Editor and save the file as ‘style.css’. Then, copy the code below, paste it into the file and rename the theme name and author information based on your needs. Be sure to change the various details and replace with your own.
In the stylesheet description, the most important things to note are the “Theme Name” and “Template” sections:
- The Theme Name (the actual name of your child theme) becomes the display name within the Appearance > Themes of the WordPress theme selector
- The Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use as the parent.
An older method of enqueuing the parent theme used the command ‘@import’. It is suggested by the WordPress Codex that the @import method is no longer deemed as best practice due to page load time. Instead, users are advised to create and make use of a functions.php file.
FUNCTIONS.PHP
The most important file in the child theme is the functions.php file as it will enqueue the parent theme (Divi). To begin, open the IDE or text editor. Copy the code below and paste it into the functions.php file.
< ?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css');}
? >
Make sure to relabel the correct paths to both the parent and child theme folders. Once you have amended all of the above details to fit your deliverables, save the file as functions.php within the child theme folder.
SCREENSHOT.JPG
It’s recommended to add an image of your or your client’s logo or a similar graphic into the child theme folder. Create an image with the dimensions 880×660 px and save it as screenshot.jpg.
Include this image in the child theme folder along with the functions.php and style.css files. When your child theme is installed and activated, this image will display as the graphic in the Appearance > Themes section of the theme selector.
How to install Divi Child Theme?
Once you have created a child theme, either via the Divi Space online builder, plugin or have constructed one ground up using one of the editors, you’ll need to install it. Make sure that the Divi theme is already installed and activated.
There are a number of ways in which you can add the child theme to your Divi website.
LOCAL SITE / DEVELOPMENT ENVIRONMENT
If you’re working on a localhost server, navigate to the relevant folder in your directory, i.e. wp-content > themes. Here, you’ll see a folder containing all of the Divi files (installed as the parent). Simply drag and drop the child theme folder here, in the Themes folder, at the same level as the Divi theme file.
Now, log into the WordPress website and navigate to Appearance > Themes. Here, you’ll see the child theme package already installed. Click Activate and the child theme will begin working.
LIVE WEBSITE
If you’re working on a live website, you’ll need to access the theme files via the server. You can either do this using FTP, by manually working through the server or by creating a zip file of the theme package.
- If you’re using an FTP client (such as FileZilla or CyberDuck), create a new connection between the website’s server and your computer. Find the root folder of the website in the server connection panel and navigate until you find the WordPress > Themes folder. Add the child theme folder here.
- If you’re manually navigating through the server, log into the server via the hosting company’s portal and search for a section named File Manager or something similar. Again, search through the files in the root folder until you find the WordPress > Themes folder and add the child theme folder here.
- A final method is to add the child theme from the WordPress website itself. To do so, zip the child theme folder and upload it via the Appearance > Themes > Add New section within the WordPress website.
Once the child theme has been installed, it’ll need to be activated. To do so, navigate to the Appearance > Themes section of the WordPress website and click Activate.
Premium Divi Child Themes
Thanks to the nature of the Divi community, there are a number of incredible designers and developers that are creating ready-made child themes for Divi. If you’re looking to bypass the entire design process of a web build then purchasing a ready-made child theme would be perfect for you.
Not only do the premium Divi child themes help you save plenty of time, but all of the legwork is already done for you. From UX planning to aesthetic design, font selection and more, all of the bells and whistles are already crafted. All that’s required is for you to add your relevant text and image content.
We have a number of beautifully designed, highly functional Divi child themes on available through our store. If you’re looking to create an attractive website in a short space of time, browse our collection of Divi child themes.
Part Three:
6 Ways to Add CSS to Divi
6 Ways to Add CSS to Divi
Divi users can choose between five different methods to add custom CSS to their websites. These methods include:
- Inline CSS added to the content section of a module
- Custom CSS Box in the Divi Theme Options dashboard
- Advanced options tab of the sections, rows and individual modules
- Divi Builder Page Settings of an individual page
- Divi child theme style.css file
- With a Custom CSS and JavaScript plugin
DEMO SETUP
To illustrate the different ways of adding CSS to Divi, we’ve set up the following demo. Here, a single row with four columns holds a single text module. Each text module is filled with a paragraph of Lorem Ipsum.
The front end displays as such:
Add CSS to Divi Using Inline CSS
Any module within the Divi theme that has a content area (i.e. a place where custom text can be entered such as the text module, blurb module etc.) will allow for inline styling.
To add inline styles to a section of an element, you’ll need to target the element itself and add the < style > attribute, thereafter you can add any number of styling properties that relate to the specific element you’re trying to target and style.
To add inline CSS to a module in the Divi Builder (provided it has a content area), open the WYSIWYG Text editor, not the WYSIWYG Visual editor.
Next, assign a tag to the element. In this case, we’ll assign a < p > tag to make it paragraph text, and apply the < style > attribute. Once the style tag has been added, you can add various properties and values.
In this example, we’ll take the first text the first text module and style the text to have a heavier font weight and a different color (blue).
PROS AND CONS OF USING INLINE STYLING
PROS:

Adding inline styles is a quick workaround for a simple change to a single element
CONS:

Using this method means that you’ll need to style each individual module element in the same fashion, which is incredibly time wasting, especially if there are many of the same styling changes and you’re working on a large website

In the same regard, it’s really easy to forget about inline styles especially in a large web build with many pages

As the inline styles are so deeply baked into the modules themselves, they cannot be targeted and edited using media queries, which could pose a problem later down the line
Add CSS to Divi Using the Divi Theme Options Custom CSS
A popular way to add CSS to Divi is by using the Custom CSS box in the Divi Theme Options dashboard. To locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you see the Custom CSS box.
If you have a small handful of styling edits, the Divi Theme Options Custom CSS box is a great place to add CSS for your website. If you have many edits, it is better to use a stylesheet.
For the next example, we’ll take the second text module in our four column layout and style it by increasing the font and changing the color. If you know exactly which element you are targeting, you can enter the CSS directly into the text area. To find the exact property that you need to target, you can open the specific Divi module, navigate to the Advanced tab and click in the Main Element area. The name of the property will automatically pop up just above the text area.
Simply copy that selector, head over to the Divi Theme Options Custom CSS box, paste in the selector’s name and add the desired styling. Click Save Changes.
In the event that your Divi module has more than one element, for example, the Blurb module includes an image, a heading and paragraph text as the content, you’ll need to be a bit more specific as to which element you’re targeting in the module. In such cases, to explicitly target the paragraph text, you’ll need to add the ‘p’ selector.
.et_pb_text_1 p {
font-size: 16px;
color: red;
}
Pros and cons of using the Divi Theme Options
PROS:

Using the Divi Theme Options Custom CSS box is a great method if you have a few CSS edits you’d like to add to a website

Far more easy to manage that inline CSS or individual module CSS (more on that next), all of your CSS will all be in one place and not scattered across a million modules

CSS styling added to the Divi Theme Options Custom CSS box will not be overridden by theme updates
Add CSS to Individual Divi Modules using the Advanced Tab CSS
The next place that you can add CSS is in the Advanced Tab section of the individual module, row or section.
First, let’s cover the individual module’s Advanced options. Within the module’s Advanced tab, you’ll find:
- CSS ID and Classes: Here you can enter unique class or ID names that can be used to add even more layers of unique styling
- Custom CSS: Composed of the before, main element and after boxes. The before and after areas are for pseudo-elements, to add additional elements either before or after the content. The main content box is where the styling of the specific module should go.
- Visibility: Here you can decide whether the module should be hidden or shown on various devices
- Transitions: This lets you assign additional transition effects to animations, as set in the Design tab
Note, each module in the Divi builder is composed of different elements, and so will present a different set of options in the Advanced tab.
To add CSS to the individual module, open up the module itself by clicking on the hamburger menu, navigate to the Advanced tab and scroll down until you see the Main Element box. Here, add the various CSS styling, but note, you only have to enter the property and the value – you do not need to specify the selector.
Going a step further, you can also add CSS styling to the various rows and sections. While the sections don’t have too many styling options, the rows do.
To view the various styling options, click on the row’s hamburger menu, navigate to the Advanced tab and start scrolling to see all of the entry options.
Similar to the individual module’s Advanced tab, you’re able to add custom IDs and classes as well as CSS to the element itself (before, main and after), except that now, these are all offered based on how many columns are present in the Section.
To add CSS styling to a specific column, navigate to the Advanced tab and search for the Main Element box of the column itself, then enter the relevant CSS.
Adding CSS into the modules and rows can be useful for quick, simple edits, but beyond small changes that are going to stay the same forever, adding CSS this way isn’t really recommended.
If you’re going to be working on a website regularly, changing up the aesthetic or adding new content, using the module or row CSS may present a few problems down the line as trying to keep track of hundreds of lines of CSS entered into various modules scattered across a website can be confusing.
PROS AND CONS OF USING THE ADVANCED TAB CSS
PROS:

Using the individual sections, rows and module’s Advanced tabs to enter CSS is useful for single, simple edits on pages that won’t really be looked at in the future

These CSS edits will not get overwritten by theme updates
CONS:

Having small amounts of CSS hidden in the Advanced settings between various modules scattered across a website can become complicated as you could easily lose track of where CSS code is placed. CSS code will become difficult to keep track of, especially if the website will need to be revisited in terms of design or development

The same sort of edits can be achieved relatively easily using an alternate method, such as the Divi Theme Options Custom CSS box or a stylesheet where all of the styling is kept in one place
Add CSS to Divi Using the Divi Builder Page Settings
Another way for Divi users to add CSS to their website is to use the Divi Builder Page Settings.
Great for quick changes that only apply to a single page or a small handful of pages, the Divi Builder Page Settings console lets users adjust variables on specific pages, post or project layouts, without having to adjust individual modules.
Any CSS code added to the Divi Builder Page Settings will only apply to the single page, post or project itself. An incredibly useful tool, the Divi Builder Page Settings replaces the need to write out very complicated, highly targeted CSS.
Within the Divi Builder Page Settings, there is a Custom CSS box. To access this Custom CSS box, click on the hamburger menu at the top of the Divi Builder and the Custom CSS box will pop up.
As well as the Custom CSS box, additional per-page customization options within the Divi Builder Page Settings include:
- Enabling split testing
- Adding a custom color picker palette per page
- Setting the pages’ gutter width, default light and dark text colors, and section and content background colors
To demonstrate the Divi Builder Page Settings, a second text module is added and assigned the H1 tag.
At this point, open up the Divi Page Settings console, scroll to the Custom CSS box and enter the relevant CSS styling. Note, here it is important to specify the selector that you’d like to target.
The Page Settings box is great for making simple changes to a single page, post or project layout, for example making headings on certain pages stand out, setting styling for images etc..
When it comes to making landing pages, maintenance mode pages or coming soon pages, the Divi Page Settings console is helpful as you can easily hide the page header, footer and bottom bar with minimal effort.
Pros and cons of using the Divi Builder Page
PROS:

The Divi Builder Page Settings is great for adding CSS styling that is only meant to reflect on one single page, not site-wide

It is easy to style a few page elements rather than writing complicated CSS with heavy levels of targeting
CONS:

If you have a website with many pages, each with individual Custom CSS entered into the Divi Builder Page Settings, you may lose track of all of the styling enhancements, in which case using a stylesheet would be a better idea
Add CSS to Divi Using a Stylesheet
In our opinion, the best way to add CSS to the Divi theme is by using a child theme and a unique stylesheet.
The concept of a child theme and using in conjunction with your Divi website was covered in Part Two of this guide, but as a quick recap:
- A child theme is a series of files that, when added together, form a ‘secondary theme’ to a parent theme,
- Using a child theme in development is repeatedly recommended as best practice as it’ll safeguard your web design efforts,
- A child theme can be made in various ways, such as using a plugin, the Divi Space Child Theme Builder or building one from scratch, as outlined in Part Two of this guide.
In our opinion, going this route – of creating a child theme and adding CSS styling to a stylesheet – is the best method for web development as it is extremely convenient having all code styling in one easy to locate place, and not spread across various spaces throughout the website’s pages and modules.
Another benefit of using a child theme and a stylesheet for CSS is that you have the ability to enqueue multiple stylesheets. This is particularly useful for large websites that have deep levels of customization in place.
PROS AND CONS OF USING A DIVI CHILD THEME AND EDITING THE STYLE.CSS FILE
PROS:

Using a Divi child theme will safeguard your website from parent theme updates

All of your website’s styling will be stored in one place that is easy to access and edit

Great for large websites, using a child theme will allow you to use and enqueue multiple stylesheets for better organization of code
CONS:

Setting up a child theme can take a bit of time
If you’d like to build a child theme for your Divi website in just a few seconds, we recommend using our Divi Space Child Theme Builder.
Read our step by step guide to creating a child theme with the Divi Space Child Theme Builder.
Add Custom CSS and JavaScript with a Plugin
Another useful way of adding CSS is by using a plugin such as the Custom CSS and JavaScript Developer Edition. Going a step further, the plugin allows you to add CSS as well as JavaScript code to your website.
The Custom CSS and JavaScript Developer Edition plugin has a number of incredible features, including:
- Automatic text formatting and syntax highlighting. This is particularly useful for users that are new to CSS and who may make a mistake from time to time
- An easy to use code editor that includes automatic text formatting and syntax highlighting
- The ability to minify CSS and JavaScript files for the removal of unnecessary characters in code files in order to increase website performance
- Preview and publish states to help the web design process
- A handy revision history feature to save progress at set periods
- The ability to use multiple files for large web builds
- SCSS compatibility for advanced developers already making use of SASS CSS
- The ability to import and export files between web builds to save time and speed up development
After the plugin has been installed and activated, the plugin adds two new editor consoles, Custom CSS and Custom JavaScript, to the WordPress website.
For a thorough breakdown of Custom CSS and Custom JavaScript, read the article How to Add Custom CSS and JavaScript to your Divi Website with a Plugin.
Compatible with all WordPress themes, buy the Custom CSS and JavaScript Developer Edition plugin today.
Pros and cons of using the Custom CSS and Custom JavaScript plugin:
PROS:

Great for experienced web developers who are searching for a powerful CSS and Javascript solution for their development processes
CONS:

Paid solution while other options listed above are free
In Summary
There are many ways to add custom CSS to the Divi theme, the trick is to find the method that feels the most comfortable and suits your Divi design habits the best.
As mentioned above, we recommend going the child theme add stylesheet route, even if it is a bit more tricky to manage in the beginning. If you decide to add CSS to the modules, pages or content areas as inline CSS, we recommend possibly keeping a note of this so that if and when you return to a website, you don’t spend hours trying to figure out where certain CSS is being served from.
Part Four:
Divi Selectors
CSS Selectors
The following CSS selectors have been identified for use exclusively for the Divi Theme and Page Builder.
CSS is made up of three main parts. If you inspect any element on a web page you’ll see these three components straight away:
The Selector
The selector is the exact series of classes, pseudo-classes, ID’s and elements used to target any on-screen element.
The selector can target a myriad things at once, as in the example above where all ‘img’ elements (image) are being targeted. At the same time, the selector, can be very specific and target an individual element or a small selection of elements.

The Property
The property is the ‘what’ you’d like to change with CSS. It could be a single aspect of an element, such as the color, or it could be collection of aspects such as height, color, border-radius, scale, angle and more.
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 color of an element by setting various hex codes. These two examples are the tip of the iceberg in terms of what can be changed and how it’ll display. 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, however, the selectors used in any theme or plugin are partly created by the developers. As a result, the process of writing CSS for a particular theme or plugin should be very specific. This guide is a catalog of selectors for the Divi Theme and Page Builder.
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, 4, 5 or 6 columns in any row.
To target all of the columns at once you can use:
.et_pb_column_inner { }
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 { }
The last number in the class changes to the number of columns there are.
What if you don’t want your changes to be so broad?
If you’d like your changes to affect only certain modules within a row, this is how you can make your CSS more specific.
To limit the changes you’re making to a single section, set a new section class in the module settings.

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.
For example, .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. Keep this in mind when using any of the selectors listed in this book.
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
#top-header
Top Header – Secondary Menu
1. PHONE ICON
#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 { }
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 { } .et-social-google-plus a.icon:before { }
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 { }
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 { }
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 { }
8. BOTTOM LINKS CONTAINER
#footer-bottom .container { }

1. MOBILE MENU ICON ( HAMBURGER )
.mobile_menu_bar:before { }
2. MOBILE MENU MAIN LINK
.et_mobile_menu .menu-item-has-children > a { }
3. MOBILE MENU NORMAL LINK
.et_mobile_menu li a { }
4. MOBILE MENU
.et_mobile_menu { }
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
a.et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { } #footer-bottom .et-social-rss a.icon:before { }
5. ACCORDION CONTENT
.et_pb_accordion .et_pb_toggle_content { }
6. ACCORDION PLUS ICON
.et_pb_accordion .et_pb_toggle_title:before { }
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 { }
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{ }

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 { }
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 { }
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) { }

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
.et_pb_post .post-meta { }
5. POST META LINKS
.et_pb_post .post-meta a { }
6. FULL WIDTH POST PREVIEW
.a.et_pb_post p:not(.post-meta) { } h2 a { }
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 { }
6. BLURB ICON CIRCLE
.et_pb_blurb .et-pb-icon-circle { }
7. BLURB IMAGE
.et_pb_main_blurb_image { }
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 { }
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 { }
6. ANSWER
.et_pb_contact_captcha { }
7. SUBMIT BUTTON
.et_pb_contact_submit.et_pb_button { }
8. CONTAINER
.et_pb_contact_form_container { }
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 { }
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 { }
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 { }
.et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }
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 use different icons, read this post that explains the Elegant Themes icon font and how it can be adapted
to suit a designs.
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 **/
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 { }
Image

1. IMAGE BACKGROUND IN LIGHTBOX
.mfp-bg { }
2. IMAGE IN LIGHTBOX
img.mfp-img { }
3. CLOSE X
.mfp-image-holder .mfp-close { }

4. IMAGE
.et_pb_image { }
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 { }
Map

1. MAP MODULE
.et_pb_map_container { }
2. MAP PIN
The pin styling is not set with CSS. Learn how to change the map pin icon by following this tutorial.
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 { }
Person

1. PERSON MODULE
.et_pb_team_member { }
2. IMAGE
.et_pb_team_member_image img { }
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 { }
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 { }
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 { }
11. PRICING TOP
.et_pb_pricing_content_top { }
12. STANDARD PRICING TABLE
.et_pb_pricing_table { }
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 { }
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 { }
Shop

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 { }
9. TAB TITLES
.wc-tab h2 { }
10. TAB DESCRIPTION
.wc-tab p { }
11. TABS ALL
.wc-tabs-wrapper { }
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 { }
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) { }
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 { }
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 { }
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’.
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 { }
5. META
.et_pb_testimonial_meta { }
6. META LINKS
.et_pb_testimonial_meta a { }
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 { }
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 { }/
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 { }
4. CAROUSEL
.et_pb_video_slider .et-carousel-group { }
Part Five: Browser Developer Tools
How to use your browser’s developer tools
In this part, we’ll be showing you how simple CSS changes can be tested and reviewed using the extremely handy developer tools built into all modern-day web browsers.
Testing Simple CSS Updates with Developer Tools
Now, we’ll take a behind-the-scenes look at the Divi theme to see how CSS can be used to change the look of certain elements.
For this demonstration, we’ve created a standard section comprised of two rows: a single column with a text module followed by three columns of blurbs and buttons.

After adding a number of headings, some dummy text and a few images, the front-end of the section looks like this:

Now, we’re going to assess these front-end elements a bit deeper to figure out the HTML make up.
For this, we’ll be using the web browser’s built-in developer tool. With most modern browsers, you should be able to right-click on a certain web element and select “Inspect” or “Inspect Element” or similar.
- If you are using Google Chrome, navigate to File > View> Developer > Developer Tools.
- If you are using Safari you will need to activate the Develop Menu by selecting the checkbox in Safari’s Advanced preferences, then navigate to Develop > Show Web Inspector.
- If you are using Mozilla Firefox navigate to Tools > Web Developer and select Inspector from the list.
By default, this should appear at the bottom of the page and look something like this.

While inspecting the web page or a certain element therein, the website/host compiles all of the information together and presents the page as HTML. The main window displays all of the HTML, while the right-hand side window shows the CSS applied to the specific element currently selected.
This entire Section created with the Divi Builder in the back end…

… is represented in a single highlighted section as:

Arrows are used to show and hide groups of elements. Clicking on the arrow on the left-hand side will expand to show two green rows. You can see them clearly labeled with CSS Class names.
i.e < div class=“ et_pb_row “et_pb_row_0 ” >

This means that the HTML element, a div, has been assigned the classes of “et_pb_row” and “et_pb_row_0”. Following this element, a second element has been assigned the classes of “et_pb_row” and “et_pb_row_1”.
Now, we can use CSS either to target both rows using the class name of “et_pb_row” or we can target either one of the elements by using the second class name of either “et_pb_row_0” or “et_pb_row_1”.
Targeting Elements with CSS
If you only want your changes to apply to the rows on this page and not the rows on the rest of your site you will need to be more specific. One way to do this would be to assign your own CSS class name to the row that you want to target with CSS.
To do so, return to the back end of the page, select the Row in question and click on the hamburger menu on the top left-hand side of the green row.

Once selected, click the Advanced tab and enter a unique CSS Class name.

Save the changes to the module and page, click Preview and assess the front end. Nothing should change in the page itself. Instead, return to the Inspect Element console and view the same element as before.
Now you will see an additional Class name divispace_example_row has been added to the first row.

Navigate to the right-hand side Inspect Element window and you’ll be able to see the new CSS Class name (highlighted here in yellow).

Before going straight to the stylesheet, you can test your CSS changes right in the Inspect Element console to see what effect it will have on your page. Now, let’s change the background color to yellow.
To do so, use the CSS section of the Inspect Element tool on the right-hand side, click between the open and close curly brackets “{ }” in the CSS section, type the following code and then hit enter.
background-color:yellow;
Instantly you’ll see your original web page transform from this:

… to this.

If you are happy with the change you’ve made to the element, you can copy the entire section of syntax:
divispace_example_row { background-color: yellow; }
And paste it into either the style.css file of your Divi website’s child theme or into the Custom CSS box in the Divi Theme Options console. Read Part Three of this guide for a refresher on the various ways you can Add CSS to Divi.
If you wanted to add the same style change to another row or module element in your website, you would need to add the same unique class name to the next element.
Using the browser’s developer tools to inspect the HTML elements is a great way to test different CSS properties and play around with different styling until you create an effect that suits your style.
These changes are temporary, and as soon as the page is refreshed, the changes will disappear. Nevertheless, becoming familiar with the browser’s Developer Tools is a great way to explore how a website is constructed and how it can be enhanced aesthetically.
As well as experimenting with the CSS on a page of your website by adding, removing or changing a setting, you can also use this handy tool to inspect other website’s elements. Rest assured no one else in the world will see it.
Breaking Down CSS Commands

In the example above, we changed an element’s background color. The CSS is broken down into two parts: the property, in this case “background-color” and the value, “yellow”.
This is but one of the myriad of CSS commands available to web designers to use. For an extensive list of the properties, visit W3 Schools.
CSS is constantly under development, seeing new additions being made all the time. If you’re starting out with CSS, we recommend playing around by testing the effect of various properties and values applied to the Divi Builder modules, and using your browser’s developer tools to assess changes.
We highly recommend playing around on a development or testing site. To set up a development site to play around in, we recommend setting up a local, offline site using Desktop Server.
Part Six:
Troubleshooting CSS
How to Troubleshoot CSS
If you’re adding CSS to your child theme’s stylesheet but the changes you’re employing aren’t reflecting, there are a number of things you can to do troubleshoot your work.
Step One: Check that the stylesheet has been added correctly. If none of the CSS is loading it could be that the entire stylesheet has been added incorrectly. Follow the steps outlined in Part Two to enqueue the stylesheet from your functions.php file.
< ?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Step Two: Check that the template is being called correctly in the stylesheet header. Be sure to write ‘Divi’ with a capital D exactly as it is on the parent theme folder.
Theme Name: Example Header
Theme URI: https://divi.space/
Description: A Child Theme built for Divi
Author: SJ
Author URI: https://divi.space
Template: Divi
License: GNU General Public License v2 or late
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Step Three: If you suspect that the CSS itself is broken, try adding something simple obvious and unmissable to the style sheet such as:
* { background: red ; }
If your website looks something like this:

… then you can safely say that the stylesheet is enqueued properly and that the CSS code itself is intact.
If you added the { background: red ;} change to the stylesheet and you did not see a change there are a few things you can do.
First, try moving this code to the top of the stylesheet and previewing the changes. If the CSS you’ve applied works at the top of the style sheet but not at the bottom, then there is a syntax error somewhere in your code.
The first ‘C’ in CSS stands for ‘cascading’ which means that if there is an error in it, only the code above the error will work, which is why * { background: red ; } did nothing at the bottom of the style sheet.
Formatting is imperative when writing CSS, and in this case, it could be that you’ve missed a closing bracket at the end of a style, a colon is missing after a property, or it could be a wrongly structured media query.
If most of your CSS works then it’s likely the issue is at the bottom of the stylesheet, but if almost none of it works then the issues is probably at the top somewhere.
If you have a really large stylesheet you could try and place lines of CSS throughout to help you identify where the error is. Try adding these lines of code at different intervals.
* { background: red ; }
* { background: yellow ; }
* { background: green ; }
* { background: blue ; }
If your site turns yellow, then you know that your error is somewhere between where you added the yellow line and where you added the green line.
Step Four: Check that Divi’s stylesheet isn’t overriding your own CSS stylesheet. If all of your other CSS is working, your CSS edits could be being overridden by Divi’s own styles.
Some CSS, such as that added by the customizer options is placed ‘in-line’ or with !important tags appended to it. Try adding !important tags to your own CSS or making it more specific by utilising the ID’s and classes from the page structure.
For example, instead of using:
h1 { font-size: 1.8em; }
Try
#et-main-area #main-content h1 { font-size: 1.8em; }
As a last resort, you could try adding the CSS to the Divi Theme Options CSS panel instead.
Step Five: Check that there isn’t a caching plugin overriding your stylesheet. If you have a caching plugin or system in use, your browser could be serving up a cached version of your page which is why you aren’t seeing your changes. Luckily, there’s a quick way to test this.
Use your browser dev tools to open the sources and view your style sheet.

If you can see your CSS saved in the back end of your site but not when viewing the style sheet in your browser then it’s most likely a caching issue, not a CSS issue.
Part Seven:
Resources
The Best Resources for Learning CSS
CSS is one of the core elements of a website. This makes learning CSS one of the most important things you can do as a web designer. This is even true if you use Divi to build your websites. Even though Divi can be styled with its built-in adjustments, having a strong grasp of CSS lets you style your sections, rows, and modules even further, as well as styling elements that you normally wouldn’t have access to.
Fortunately, there are a lot of tutorials and courses available on the web all geared to help you learn CSS. In this section, we’ll look at the best CSS resources for Divi and see some of the best resources for learning CSS in general.
If you’d like to improve your web development skills and learn CSS from the best in the business, read more about our popular online course Transforming Divi with CSS and jQuery.
WHY YOU SHOULD LEARN CSS
CSS tells the website what styles to use – including fonts, colors, effects, and animations. CSS is a skill that’s in demand and that demand isn’t going away. CSS is an essential part of web design, so it’s an essential skill to have.
You can make these adjustments easily in Divi, but learning CSS gives you even more control. Divi doesn’t require CSS knowledge to build intricate and elegant websites, but it does have features to take advantage of CSS knowledge and that knowledge can take your Divi websites even further. You’ll have more control over the site.
Learning CSS makes you more valuable to your clients. You’ll be able to produce higher quality websites with features that set your designs apart from the rest. Increasing your skill-set helps give you a competitive advantage over your competition. Your designs will look more professional and you’ll be able to increase your rates because you can bring more to the project. You’ll be able to create websites that are more unique.
You’ll be able to use the CSS that you find on many of the websites that focus on Divi. Learning to use CSS means that you’ll be able to customize the CSS for your specific needs rather than just copy and paste, which can give results that you might not need or want.
You’ll be able to offer new services, go after more work, go after larger projects, which helps build your web design business.
Best Online Courses for Learning CSS with Divi
Here’s a list of courses that focus on using CSS with Divi. Courses give a structure to the learning experience and ensure that you learn everything you need to learn – removing the guesswork from hunting through tutorials. They teach how to write clean code, cover the best tools and how to use them, includes downloads and resources, and provide feedback and support. Many include student interaction, providing an environment to help each other.
TRANSFORMING DIVI WITH CSS AND JQUERY

Transforming Divi with CSS and jQuery is our online course that covers Divi, CSS, and jQuery from beginner to advanced level. It teaches how to write clean code and includes real-world examples, a one hour call per week during the course, guided learning, an extended jQuery cheat-sheet, access to recorded sessions, a Facebook group, and lifetime access to the course. It’s the only Divi CSS course that also teaches jQuery. It also teaches building a website with Divi from start to finish. You get a certification as a Divi frontend developer which includes a digital certificate and badge for your website.
JOSH’S DIVI/CSS COURSE

Josh’s Divi CSS Course from Josh Hall teaches the basics of CSS and how to customize Divi with plugins like Gravity Forms and Woo Commerce, troubleshooting and solving styling problems, and helps you to be comfortable using CSS. It’s designed for both beginners and advanced Divi web designers and works with any WordPress theme. It includes lots of resources, lifetime access, a Facebook group, and is designed more as a training guide than an academic course.
THE CSS & DIVI BEGINNER COURSE

The CSS & Divi Beginner Course from Michelle Nunan teaches the basics of CSS and how to use it with Divi. It’s for beginners and advanced users. It’s taught in bite-sized lessons and includes homework with quizzes, tools and resources, etc. It includes bonus material, access to a Facebook group, webinars, lifetime access, etc.
Divi Community Blogs
Here are a few blogs with CSS tutorials from the Divi community. There are lots of Divi blogs out there that include a tutorial or two, but these blogs include more than a few that focus on CSS. Some provide downloads that you can use in your projects
DIVI SOUP

Michelle Nunan’s Divi Soup includes several step-by-step tutorials with downloads.
Quiroz

Geno’s blog includes lots of CSS snippets for Divi modules. It also includes lots of articles with tips and tutorials to do specific things with CSS for your Divi website.
divi space

SJ James has compiled a nice list of CSS resources to help you learn more about Divi and CSS. Feel free to add your own list of resources in the comments.
Best Websites and Learning Portals to Learn CSS
These websites offer courses and tutorials about CSS in general. None focus specifically on Divi, but they do cover from the basics to advanced level of using CSS in general, which can be applied to Divi.
W3SCHOOLS CSS TUTORIALS

W3schools is an excellent place to learn and practice just about any programming or markup language for the web. Of course, this includes CSS. It’s not specific to any theme, but the basics are there and it includes lots of examples and places where you can experiment and see the results as you go. The tutorials are free. They even have a CSS developer certification for a fee.
Lynda

Lynda, from LinkedIn, has over 1800 tutorials for CSS and covers every level from beginner to advanced. Many are broader or similar topics that include CSS. They cover a large range of subjects. 70 are labeled as courses. Many cover the same or similar material by different authors. Sort by types, skill level, duration, subjects, companies, and authors.
Udemy

Udemy currently has 316 courses that are about or include CSS. Many of them include many hours of training, have excellent ratings, and are priced well. Sort by top, new, favorites, language, topic, rating, and duration.
CODE ACADEMY

Learn CSS from Code Academy includes 6 lessons. They’re taught with different formats including interactive, freeform projects that you can use in your portfolio, articles, and video. Each lesson includes quizzes.
Udacity

Intro to HTML and CSS is a free course from Udacity that’s designed for beginners. It takes three weeks to complete and includes CSS syntax, selectors, units, code editors, and Developer Tools.
HTML dog

HTML Dog has lots of free CSS tutorials for beginner, intermediate, and advanced levels. The page lists each tutorial with links. The tutorials are simple and include code that you can copy to use.
stack social

Stack Social has several courses from beginner to expert level. They also have a free course that isn’t included in their standard list. Most include HTML training as well as CSS.
Ending Thoughts
That’s our list of the best CSS resources for Divi and sources where you can learn CSS in general. CSS is an important skill that every designer and developer should learn. It will help you attract better clients, better projects, you can charge more, and can help you build a flourishing Divi design business. Developing your CSS skills can make your Divi designs look better than they can look by using Divi out of the box.
Learn CSS for Divi
If you want to learn the ins and outs of CSS as well as jQuery, enroll for the Divi Space online course,
Transforming Divi with CSS & jQuery.

Divi is a powerful theme and you can probably do more with it than any other builder without using code.
However, if you do use code you can get far more out of Divi. Learning CSS and jQuery on your own can be a slow and daunting task and knowing how to use it with Divi is another story. A structured course is far easier to follow.
Our course, Transforming Divi and CSS & jQuery provides everything you need to build amazing websites
with Divi. In the course you’ll learn the fundamentals of CSS and jQuery as applied to Divi.
course overview
The course is divided into 4 modules with 17 lessons, providing around 14 hours of training. It takes you from a beginner level to a skilled knowledge of writing your own code in both languages. It goes from an introduction to CSS to manipulating HTML elements with jQuery and creating custom triggers for them.
When you complete this course you’ll have a functioning knowledge of Divi, CSS, and jQuery, and be able
to create your own child themes and layouts. You’ll also know how to take code snippets from code
libraries and using them in your own projects.
The course will show you how to :
- Create CSS and jQuery ready child themes.
- Write the CSS and jQuery that goes into those child themes.
- Move, hide, replace, and customize objects- including objects on template pages that you don’t have
access to in the WordPress backend. - Use the Divi Builder any way you want including in the menu, theme pages, WooCommerce, etc.
- How to make sweeping changes to Divi’s default styles using CSS within your child themes.
- How to reverse engineer the effects from one of the world’s top websites and learn how to apply those effects to your own projects with Divi.
The course uses video, text, webinars, quizzes, has lifetime access to current and future materials, and lots
of help such as a private Facebook group, live Q&A’s, and direct support. All of the code will be available to
download both as a child theme and a plugin. It includes an exclusive cheat-sheet with 20 complete
functions that are ready to use and customize for your own projects.
Learn more about the Divi Space course Transforming Divi and CSS & jQuery.
CSS Resources
To learn more about CSS, have a look at the following resources or bookmark this page.
Part Eight:
Tables
Divi Selectors
Selector | Description |
---|---|
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 | #top-header |
Top Header - Secondary Menu | |
1. Phone Icon | #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 { } |
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 { } |
Top Header - Navigation | |
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 { } |
Top Header - Sub Menu | |
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 { } |
Footer | |
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 { } |
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 { } |
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 { } |
5. Accordion Content | .et_pb_accordion .et_pb_toggle_content { } |
6. Accordion Plus Icon | .et_pb_accordion .et_pb_toggle_title:before { } |
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 { } |
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 { } |
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 { } |
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 { } |
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) { } |
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 | .et_pb_post .post-meta { } |
5. Post Meta Links | .et_pb_post .post-meta a { } |
6. Full Width Post Preview | .et_pb_post p:not(.post-meta) { } |
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 { } |
6. Blurb Icon Circle | .et_pb_blurb .et-pb-icon-circle { } |
7. Blurb Image | .et_pb_main_blurb_image { } |
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 { } |
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 { } |
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 { } |
6. Answer | .et_pb_contact_captcha { } |
7. Submit Button | .et_pb_contact_submit.et_pb_button { } |
8. Container | .et_pb_contact_form_container { } |
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 { } |
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 { } |
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 { } |
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 { } |
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 **/ |
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 { } |
Image | |
1. Image background in lightbox | .mfp-bg { } |
2. Image in lightbox | img.mfp-img { } |
3. Close X | .mfp-image-holder .mfp-close { } |
4. Image | .et_pb_image { } |
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 { } |
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 { } |
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. |
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 { } |
Person | |
1. Person Module | .et_pb_team_member { } |
2. Image | .et_pb_team_member_image img { } |
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 { } |
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 { } |
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 { } |
11. Pricing Top | .et_pb_pricing_content_top { } |
12. Standard pricing Table | .et_pb_pricing_table { } |
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 { } |
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 { } |
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 { } |
9. Tab Titles | .wc-tab h2 { } |
10. Tab description | .wc-tab p { } |
11. Tabs ALL | .wc-tabs-wrapper { } |
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 { } |
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) { } |
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 { } |
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 { } |
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’. | |
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 { } |
5. Meta | .et_pb_testimonial_meta { } |
6. Meta Links | .et_pb_testimonial_meta a { } |
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 { } |
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 { } |
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 { } |
4. Carousel | .et_pb_video_slider .et-carousel-group { }l |
Basic Property Reference
Property | Description |
---|---|
A | |
align-content | Specifies the alignment between the lines inside a flexible container when the items do not use all available space |
align-items | Specifies the alignment for items inside a flexible container |
align-self | Specifies the alignment for selected items inside a flexible container |
all | Resets all properties (except unicode-bidi and direction) |
animation | A shorthand property for all the animation-* properties |
animation-delay | Specifies a delay for the start of an animation |
animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-duration | Specifies how long an animation should take to complete one cycle |
animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-iteration-count | Specifies the number of times an animation should be played |
animation-name | Specifies a name for the @keyframes animation |
animation-play-state | Specifies whether the animation is running or paused |
animation-timing-function | Specifies the speed curve of an animation |
B | |
backface-visibility | Defines whether or not the back face of an element should be visible when facing the user |
background | A shorthand property for all the background-* properties |
background-attachment | Sets whether a background image scrolls with the rest of the page, or is fixed |
background-blend-mode | Specifies the blending mode of each background layer (color/image) |
background-clip | Defines how far the background (color or image) should extend within an element |
background-color | Specifies the background color of an element |
background-image | Specifies one or more background images for an element |
background-origin | Specifies the origin position of a background image |
background-position | Specifies the position of a background image |
background-repeat | Sets if/how a background image will be repeated |
background-size | Specifies the size of the background images |
border | A shorthand property for border-width, border-style and border-color |
border-bottom | A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color |
border-bottom-color | Sets the color of the bottom border |
border-bottom-left-radius | Defines the radius of the border of the bottom-left corner |
border-bottom-right-radius | Defines the radius of the border of the bottom-right corner |
border-bottom-style | Sets the style of the bottom border |
border-bottom-width | Sets the width of the bottom border |
border-collapse | Sets whether table borders should collapse into a single border or be separated |
border-color | Sets the color of the four borders |
border-image | A shorthand property for all the border-image-* properties |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |
border-image-slice | Specifies how to slice the border image |
border-image-source | Specifies the path to the image to be used as a border |
border-image-width | Specifies the width of the border image |
border-left | A shorthand property for all the border-left-* properties |
border-left-color | Sets the color of the left border |
border-left-style | Sets the style of the left border |
border-left-width | Sets the width of the left border |
border-radius | A shorthand property for the four border-*-radius properties |
border-right | A shorthand property for all the border-right-* properties |
border-right-color | Sets the color of the right border |
border-right-style | Sets the style of the right border |
border-right-width | Sets the width of the right border |
border-spacing | Sets the distance between the borders of adjacent cells |
border-style | Sets the style of the four borders |
border-top | A shorthand property for border-top-width, border-top-style and border-top-color |
border-top-color | Sets the color of the top border |
border-top-left-radius | Defines the radius of the border of the top-left corner |
border-top-right-radius | Defines the radius of the border of the top-right corner |
border-top-style | Sets the style of the top border |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |
bottom | Sets the elements position, from the bottom of its parent element |
box-decoration-break | Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. |
box-shadow | Attaches one or more shadows to an element |
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
break-after | Specifies the page-, column-, or region-break behavior after the generated box |
break-before | Specifies the page-, column-, or region-break behavior before the generated box |
break-inside | Specifies the page-, column-, or region-break behavior inside the generated box |
C | |
caption-side | Specifies the placement of a table caption |
caret-color | Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable |
@charset | Specifies the character encoding used in the style sheet |
clear | Specifies on which sides of an element floating elements are not allowed to float |
clip | Clips an absolutely positioned element |
color | Sets the color of text |
column-count | Specifies the number of columns an element should be divided into |
column-fill | Specifies how to fill columns, balanced or not |
column-gap | Specifies the gap between the columns |
column-rule | A shorthand property for all the column-rule-* properties |
column-rule-color | Specifies the color of the rule between columns |
column-rule-style | Specifies the style of the rule between columns |
column-rule-width | Specifies the width of the rule between columns |
column-span | Specifies how many columns an element should span across |
column-width | Specifies the column width |
columns | A shorthand property for column-width and column-count |
content | Used with the :before and :after pseudo-elements, to insert generated content |
counter-increment | Increases or decreases the value of one or more CSS counters |
counter-reset | Creates or resets one or more CSS counters |
cursor | Specifies the mouse cursor to be displayed when pointing over an element |
D | |
direction | Specifies the text direction/writing direction |
display | Specifies how a certain HTML element should be displayed |
E | |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
F | |
filter | Defines effects (e.g. blurring or color shifting) on an element before the element is displayed |
flex | A shorthand property for the flex-grow, flex-shrink , and the flex-basis properties |
flex-basis | Specifies the initial length of a flexible item |
flex-direction | Specifies the direction of the flexible items |
flex-flow | A shorthand property for the flex-direction and the flex-wrap properties |
flex-grow | Specifies how much the item will grow relative to the rest |
flex-shrink | Specifies how the item will shrink relative to the rest |
flex-wrap | Specifies whether the flexible items should wrap or not |
float | Specifies whether or not a box should float |
font | A shorthand property for the font-style, font-variant, font-weight, font-size/line-height , and the font-family properties |
@font-face | A rule that allows websites to download and use fonts other than the "web-safe" fonts |
font-family | Specifies the font family for text |
font-feature-settings | Allows control over advanced typographic features in OpenType fonts |
@font-feature-values | Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType |
font-kerning | Controls the usage of the kerning information (how letters are spaced) |
font-language-override | Controls the usage of language-specific glyphs in a typeface |
font-size | Specifies the font size of text |
font-size-adjust | Preserves the readability of text when font fallback occurs |
font-stretch | Selects a normal, condensed, or expanded face from a font family |
font-style | Specifies the font style for text |
font-synthesis | Controls which missing typefaces (bold or italic) may be synthesized by the browser |
font-variant | Specifies whether or not a text should be displayed in a small-caps font |
font-variant-alternates | Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values |
font-variant-caps | Controls the usage of alternate glyphs for capital letters |
font-variant-east-asian | Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese) |
font-variant-ligatures | Controls which ligatures and contextual forms are used in textual content of the elements it applies to |
font-variant-numeric | Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers |
font-variant-position | Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font |
font-weight | Specifies the weight of a font |
G | |
grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns , and the grid-auto-flow properties |
grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start , grid-column-start , grid-row-end , and grid-column-end properties |
grid-auto-columns | Specifies a default column size |
grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
grid-auto-rows | Specifies a default row size |
grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
grid-column-end | Specifies where to end the grid item |
grid-column-gap | Specifies the size of the gap between columns |
grid-column-start | Specifies where to start the grid item |
grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
grid-row-end | Specifies where to end the grid item |
grid-row-gap | Specifies the size of the gap between rows |
grid-row-start | Specifies where to start the grid item |
grid-template | A shorthand property for the grid-template-rows , grid-template-columns and grid-areas properties |
grid-template-areas | Specifies how to display columns and rows, using named grid items |
grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
grid-template-rows | Specifies the size of the rows in a grid layout |
H | |
hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box |
height | Sets the height of an element |
hyphens | Sets how to split words to improve the layout of paragraphs |
I | |
image-rendering | Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled |
@import | Allows you to import a style sheet into another style sheet |
isolation | Defines whether an element must create a new stacking content |
J | |
justify-content | Specifies the alignment between the items inside a flexible container when the items do not use all available space |
K | |
@keyframes | Specifies the animation code |
L | |
left | Specifies the left position of a positioned element |
letter-spacing | Increases or decreases the space between characters in a text |
line-break | Specifies how/if to break lines |
line-height | Sets the line height |
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |
M | |
margin | Sets all the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |
max-height | Sets the maximum height of an element |
max-width | Sets the maximum width of an element |
@media | Sets the style rules for different media types/devices/sizes |
min-height | Sets the minimum height of an element |
min-width | Sets the minimum width of an element |
mix-blend-mode | Specifies how an element's content should blend with its direct parent background |
O | |
object-fit | Specifies how the contents of a replaced element should be fitted to the box established by its used height and width |
object-position | Specifies the alignment of the replaced element inside its box |
opacity | Sets the opacity level for an element |
order | Sets the order of the flexible item, relative to the rest |
orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element |
outline | A shorthand property for the outline-width, outline-style , and the outline-color properties |
outline-color | Sets the color of an outline |
outline-offset | Offsets an outline, and draws it beyond the border edge |
outline-style | Sets the style of an outline |
outline-width | Sets the width of an outline |
overflow | Specifies what happens if content overflows an element's box |
overflow-wrap | Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) |
overflow-x | Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area |
overflow-y | Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area |
P | |
padding | A shorthand property for all the padding-* properties |
padding-bottom | Sets the bottom padding of an element |
padding-left | Sets the left padding of an element |
padding-right | Sets the right padding of an element |
padding-top | Sets the top padding of an element |
page-break-after | Sets the page-breake behavior after an element |
page-break-before | Sets the page-breake behavior before an element |
page-break-inside | Sets the page-breake behavior inside an element |
perspective | Gives a 3D-positioned element some perspective |
perspective-origin | Defines at which position the user is looking at the 3D-positioned element |
pointer-events | Defines whether or not an element reacts to pointer events |
position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed) |
Q | |
quotes | Sets the type of quotation marks for embedded quotations |
R | |
resize | Defines if (and how) an element is resizable by the user |
right | Specifies the right position of a positioned element |
S | |
scroll-behavior | Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump |
T | |
tab-size | Specifies the width of a tab character |
table-layout | Defines the algorithm used to lay out table cells, rows, and columns |
text-align | Specifies the horizontal alignment of text |
text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" |
text-combine-upright | Specifies the combination of multiple characters into the space of a single character |
text-decoration | Specifies the decoration added to text |
text-decoration-color | Specifies the color of the text-decoration |
text-decoration-line | Specifies the type of line in a text-decoration |
text-decoration-style | Specifies the style of the line in a text decoration |
text-indent | Specifies the indentation of the first line in a text-block |
text-justify | Specifies the justification method used when text-align is "justify" |
text-orientation | Defines the orientation of the text in a line |
text-overflow | Specifies what should happen when text overflows the containing element |
text-shadow | Adds shadow to text |
text-transform | Controls the capitalization of text |
text-underline-position | Specifies the position of the underline which is set using the text-decoration property |
top | Specifies the top position of a positioned element |
transform | Applies a 2D or 3D transformation to an element |
transform-origin | Allows you to change the position on transformed elements |
transform-style | Specifies how nested elements are rendered in 3D space |
transition | A shorthand property for all the transition-* properties |
transition-delay | Specifies when the transition effect will start |
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-timing-function | Specifies the speed curve of the transition effect |
U | |
unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
user-select | Specifies whether the text of an element can be selected |
V | |
vertical-align | Sets the vertical alignment of an element |
visibility | Specifies whether or not an element is visible |
W | |
white-space | Specifies how white-space inside an element is handled |
widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element |
width | Sets the width of an element |
word-break | Specifies how words should break when reaching the end of a line |
word-spacing | Increases or decreases the space between words in a text |
word-wrap | Allows long, unbreakable words to be broken and wrap to the next line |
writing-mode | Specifies whether lines of text are laid out horizontally or vertically |
Z | |
z-index | Sets the stack order of a positioned element |
Property | Description | |
---|---|---|
.class | .intro | Selects all elements with class="intro" |
#id | #firstname | Selects the element with id="firstname" |
* | * | Selects all elements |
element | p | Selects all p elements |
element,element | div, p | Selects all div elements and all elements |
element element | div p | Selects all p elements inside elements |
element>element | div > p | Selects all p elements where the parent is a element |
element+element | div + p | Selects all p elements that are placed immediately after < div > elements |
element1~element2 | p ~ ul | Selects every ul element that are preceded by a element |
[attribute] | [target] | Selects all elements with a target attribute |
[attribute=value] | [target=_blank] | Selects all elements with target=" _blank " |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word " flower " |
[attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
[attribute^=value] | a[href^="https"] | Selects every a element whose href attribute value begins with "https" |
[attribute$=value] | a[href$=".pdf"] | Selects every a element whose href attribute value ends with ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Selects every a element whose href attribute value contains the substring "w3schools" |
:active | a:active | Selects the active link |
::after | p::after | Insert something after the content of each p element |
::before | p::before | Insert something before the content of each p element |
:checked | input:checked | Selects every checked input element |
:default | input:default | Selects the default input element |
:disabled | input:disabled | Selects every disabled input element |
:empty | p:empty | Selects every p element that has no children (including text nodes) |
:enabled | input:enabled | Selects every enabled input element |
:first-child | p:first-child | Selects every p element that is the first child of its parent |
::first-letter | p::first-letter | Selects the first letter of every p element |
::first-line | p::first-line | Selects the first line of every < p > element |
:first-of-type | p:first-of-type | Selects every < p > element that is the first element of its parent |
:focus | input:focus | Selects the input element which has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects input elements with a value within a specified range |
:indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
:invalid | input:invalid | Selects all input elements with an invalid value |
:lang(language) | p:lang(it) | Selects every p element with a lang attribute equal to "it" (Italian) |
:last-child | p:last-child | Selects every p element that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every p element that is the last element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a p element |
:nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every p element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every p element that is the second p element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent |
:only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent |
:only-child | p:only-child | Selects every p element that is the only child of its parent |
:optional | input:optional | Selects input elements with no "required" attribute |
:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
::placeholder | input::placeholder | Selects input elements with placeholder text |
:read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
:read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
:required | input:required | Selects input elements with the "required" attribute specified |
:root | :root | Selects the document's root element |
::selection | ::selection | Selects the portion of an element that is selected by a user |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all input elements with a valid value |
:visited | a:visited | Selects all visited links |
CSS Selectors
Selector | Example | Description |
---|---|---|
.class | .intro | Selects all elements with class="intro" |
#id | #firstname | Selects the element with id=" firstname" |
* | * | Selects all elements |
element | p | Selects all p elements |
element,element | div, p | Selects all div elements and all p elements |
element element | div p | Selects all p elements inside div elements |
element>element | div > p | Selects all p elements where the parent is a div element |
element+element | div + p | Selects all p elements that are placed immediately after div elements |
element1~element2 | p ~ ul | Selects every < ul> element that are preceded by a p element |
[attribute] | [target] | Selects all elements with a target attribute |
[attribute=value] | [target=_blank] | Selects all elements with target=" _blank" |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
[attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
[attribute^=value] | a[href^="https"] | Selects every a element whose href attribute value begins with "https " |
[attribute$=value] | a[href$=".pdf"] | Selects every a element whose href attribute value ends with ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Selects every a element whose href attribute value contains the substring "w3schools" |
:active | a:active | Selects the active link |
::after | p::after | Insert something after the content of each p element |
::before | p::before | Insert something before the content of each p element |
:checked | input:checked | Selects every checked input element |
:default | input:default | Selects the default input element |
:disabled | input:disabled | Selects every disabled input element |
:empty | p:empty | Selects every p element that has no children (including text nodes) |
:enabled | input:enabled | Selects every enabled input element |
:first-child | p:first-child | Selects every p element that is the first child of its parent |
::first-letter | p::first-letter | Selects the first letter of every p element |
::first-line | p::first-line | Selects the first line of every p element |
:first-of-type | p:first-of-type | Selects every p element that is the first p element of its parent |
:focus | input:focus | Selects the input element which has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects input elements with a value within a specified range |
:indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
:invalid | input:invalid | Selects all input elements with an invalid value |
:lang(language) | p:lang(it) | Selects every p element with a lang attribute equal to "it" (Italian) |
:last-child | p:last-child | Selects every p element that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every p element that is the last p element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a p element |
:nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every p element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every p element that is the second p element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent |
:only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent |
:only-child | p:only-child | Selects every p element that is the only child of its parent |
:optional | input:optional | Selects input elements with no "required" attribute |
:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
::placeholder | input::placeholder | Selects input elements with placeholder text |
:read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
:read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
:required | input:required | Selects input elements with the "required" attribute specified |
:root | :root | Selects the document's root element |
::selection | ::selection | Selects the portion of an element that is selected by a user |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all input elements with a valid value |
:visited | a:visited | Selects all visited links |
CSS Units
Relative Lengths | Example |
---|---|
em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
ex | Relative to the x-height of the current font (rarely used) |
ch | Relative to width of the "0" (zero) |
rem | Relative to font-size of the root element |
vw | Relative to 1% of the width of the viewport* |
vh | Relative to 1% of the height of the viewport* |
vmin | Relative to 1% of viewport's* smaller dimension |
vmax | Relative to 1% of viewport's* larger dimension |
% | Relative to the parent element |
Absolute Lengths | Example |
---|---|
cm | centimeters |
m | millimeters |
in | inches (1in = 96px = 2.54cm) |
px | pixels (1px = 1/96th of 1in) |
pt | points (1pt = 1/72 of 1in) |
pc | picas (1pc = 12 pt) |
Color values
Absolute Lengths | Example |
---|---|
Hexadecimal Colors | A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. |
RGBA Colors | RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color is specified with the rgba() function, which has the following syntax: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). |
HSL Colors | SL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. An HSL color value is specified with the hsl() function, which has the following syntax: hsl(hue, saturation, lightness) Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white. |