Skip to main content

Divi Selectors

DescriptionSelector
Main header before scroll#main-header { }
Main header before scroll#main-header { }
Main header after scroll#main-header.et-fixed-header { }
Logo#Logo { }
Top Navigation#et-top-navigation { }
Main Menu List Item#top-menu li a { }
Main Menu Drop Down Arrow#top-menu .menu-item-has-children > a:first-child:after { }
Search icon#et_search_icon:before { }
Top Header#top-header

Top Header - Secondary Menu

DescriptionSelector
Phone Icon#et-info-phone:before { }
Phone number#et-info-phone { }
Email Icon#et-info-email:before { }
Email Address#et-info-email { }
Facebook icon.et-social-facebook a.icon:before { }
Twitter Icon.et-social-twitter a.icon:before { }
Google + Icon.et-social-google-plus a.icon:before { }
RSS Icon.et-social-rss a.icon:before { }
Top Header Menu Item#et-secondary-menu > ul > li a { }
Top Header Drop Down Arrow#et-secondary-nav .menu-item-has-children > a:first-child:after { }
Cart.et-cart-info span:before { }
Number of Items.et-cart-info span { }

Top Header - Navigation

DescriptionSelector
Top Navigation Sub Menu#et-secondary-nav .sub-menu { }
Top Navigation Drop Down Link#et-secondary-nav li li a { }
Top Navigation link with Drop Down#et-secondary-nav .menu-item-has-children > a:first-child { }

Top Header - Sub Menu

DescriptionSelector
Main Menu Drop Down Link#top-menu .menu-item-has-children > a:first-child { }
Main Header Sub Menu Link#top-menu li li a { }
Main Header Sub Menu#top-menu .sub-menu { }
DescriptionSelector
Footer Info Text#footer-info p { }
Footer Links#footer-info a { }
Facebook Icon Footer#footer-bottom .et-social-facebook a.icon:before { }
Twitter Icon Footer#footer-bottom .et-social-twitter a.icon:before { }
Google + Icon Footer#footer-bottom .et-social-google-plus a.icon:before { }
RSS Icon Footer#footer-bottom .et-social-rss a.icon:before { }
Icon Container Footer.et-social-icons { }
Bottom Links Container#footer-bottom .container { }
Mobile Menu Icon ( Hamburger ).mobile_menu_bar:before { }
Mobile Menu Main Link.et_mobile_menu .menu-item-has-children > a { }
Mobile menu Normal Link.et_mobile_menu li a { }
Mobile Menu.et_mobile_menu { }

Modules

Accordion

DescriptionSelector
Open Accordion.et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all accordions)
Closed Accordion.et_pb_accordion .et_pb_toggle_close { }
Accordion Closed Title.et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }
Accordion Open Title.et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { }
Accordion Content.et_pb_accordion .et_pb_toggle_content { }
Accordion Plus Icon.et_pb_accordion .et_pb_toggle_title:before { }

Audio

DescriptionSelector
Cover Art.et_pb_audio_cover_art { }
Audio Module.et_pb_audio_module { }
Audio Title.et_pb_audio_module_content h2 { }
Controls Container.et_pb_audio_module .mejs-container .mejs-controls { }
Play Button.et_pb_audio_module .mejs-controls .mejs-play button { }
Timer Control.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time- handle { }
Time Slider.et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-time-slider { }
Time Display.et_pb_audio_module .et_audio_container .mejs-container .mejs-controls .mejs-time span { }
Mute Button.et_pb_audio_module .mejs-controls .mejs-mute button { }
Current Volume Bar.et_pb_audio_module .mejs-horizontal-volume-current { }
Volume Bar Background { }.et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-volume- slider .mejs-horizontal-volume-total { }

Bar Counters

DescriptionSelector
Full bar.et_pb_counters .et_pb_counter_container { }
Amount.et_pb_counters .et_pb_counter_amount { }
Title.et_pb_counters .et_pb_counter_title { }
Counter Amount.et_pb_counters span.et_pb_counter_amount_number { }
Entire Module.et_pb_counters { }

Blog

DescriptionSelector
Post.et_pb_blog_grid .et_pb_post { }
Post Image.et_pb_blog_grid .et_pb_image_container img { }
Post Title.et_pb_blog_grid .et_pb_post h2 a { }
Post Meta.et_pb_blog_grid .et_pb_post .post-meta { }
Post Meta Links.et_pb_blog_grid .et_pb_post .post-meta a { }
Post Preview Text.et_pb_blog_grid .et_pb_post p:not(.post-meta) { }
Full Width Blog.et_pb_post { }
Full Width Blog Image.et_pb_post a img { }
Post Title.et_pb_post h2 a { }
Post Meta.et_pb_post .post-meta { }
Post Meta Links.et_pb_post .post-meta a { }
Full Width Post Preview.et_pb_post p:not(.post-meta) { }

Blurbs

DescriptionSelector
Entire Blurb.et_pb_blurb { }
Blurb Icon.et_pb_blurb .et-pb-icon { }
Blurb Text.et_pb_blurb .et_pb_blurb_container { }
Blurb Title.et_pb_blurb h4 { }
Blurb Icon Border.et_pb_blurb .et-pb-icon-circle-border { }
Blurb Icon Circle.et_pb_blurb .et-pb-icon-circle { }
Blurb Image.et_pb_main_blurb_image { }

Call to Actions

DescriptionSelector
Entire CTA Module.et_pb_promo { }
CTA Title.et_pb_promo_description h2 { }
Description.et_pb_promo_description p { }
CTA Button.et_pb_promo_button{ }
CTA Button on Hover.et_pb_promo_button:hover { }
CTA Arrow on Hover.et_pb_promo .et_pb_button:after { }

Circle Counter

DescriptionSelector
Circle Counter.et_pb_circle_counter { }
Circle Counter Value.et_pb_circle_counter .percent p { }
Circle Counter Title.et_pb_circle_counter h3 { }

Contact Form

DescriptionSelector
Contact Form Title.et_pb_contact_main_title { }
Name.et_pb_contact_name { }
Email Address.et_pb_contact_email { }
Message.et_pb_contact_message { }
Captcha sum span.et_pb_contact_captcha_question { }
Answer.et_pb_contact_captcha { }
Submit Button.et_pb_contact_submit.et_pb_button { }
Container.et_pb_contact_form_container { }

Countdown Timer

DescriptionSelector
Title.et_pb_countdown_timer .title { }
Days Left.et_pb_countdown_timer .days p.value { }
Day(s) label.et_pb_countdown_timer .days p.label { }
Hour(s) label.et_pb_countdown_timer .hours p.label { }
Minute(s) label.et_pb_countdown_timer .minutes p.label { }
Second(s) label.et_pb_countdown_timer .seconds p.label { }
Hours Left.et_pb_countdown_timer .hours p.value { }
Minutes Left.et_pb_countdown_timer .minutes p.value { }
Seconds Left.et_pb_countdown_timer .seconds p.value { }
Separators.et_pb_countdown_timer .sep { }
Entire Module.et_pb_countdown_timer { }

Email opt-In

DescriptionSelector
Module.et_pb_newsletter.et_pb_subscribe { }
Title.et_pb_newsletter_description h2 { }
Description.et_pb_newsletter_description:not(h2) { }
Name.et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { }
Email Address.et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { }
Button.et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }

Portfolio

DescriptionSelector
Overlay.et_pb_portfolio_image .et_overlay { }
Image.et_pb_portfolio_image img { }
Portfolio Icon.et_pb_portfolio_image .et_overlay:before { }
Title.et_pb_portfolio_image h3 { }
Portfolio Meta.et_pb_portfolio_image p.post-meta { }
Module.et_pb_fullwidth_portfolio { } /** For full-width portfolio **/
DescriptionSelector
Overlay icon.et_pb_gallery_image .et_overlay:before { }
Gallery Grid Title.et_pb_gallery_grid .et_pb_gallery_title { }
Overlay.et_pb_gallery_image .et_overlay { }
Image.et_pb_gallery_image { }

Image

DescriptionSelector
Image background in lightbox.mfp-bg { }
Image in lightboximg.mfp-img { }
Close X.mfp-image-holder .mfp-close { }
Image.et_pb_image { }

Login

DescriptionSelector
Login Module.et_pb_login { }
Title.et_pb_login h2 { }
Description.et_pb_login .et_pb_newsletter_description:not(h2) { }
Username.et_pb_login #user_login { }
Password.et_pb_login #user_pass { }
Forgot Password Text.et_pb_login .et_pb_forgot_password { }
Submit Button.et_pb_login .et_pb_newsletter_button { }

Map

DescriptionSelector
Map Module.et_pb_map_container { }
Map PinThe pin styling is not set with CSS. You can learn how to change it using this pretty cool article by Dan Mossop.

Number Counter

DescriptionSelector
Number Counter.et_pb_number_counter { }
Number.et_pb_number_counter span.percent-value { }
Number Counter Text.et_pb_number_counter h3 { }
With Percentage.et_pb_number_counter .percent { }

Person

DescriptionSelector
Person Module.et_pb_team_member { }
Image.et_pb_team_member_image img { }
Name.et_pb_team_member_description h4 { }
Position.et_pb_member_position { }
Description.et_pb_team_member_description { }
Facebook.et_pb_team_member .et_pb_facebook_icon { }
Twitter.et_pb_team_member .et_pb_twitter_icon { }
Google +.et_pb_team_member .et_pb_google_icon { }
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

DescriptionSelector
Header Section.et_pb_pricing_heading { }
Featured Table.et_pb_pricing_table.et_pb_featured_table { }
Pricing Section.et_pb_pricing_content_top { }
Price.et_pb_pricing_table .et_pb_sum { }
Per Year.et_pb_pricing_table .et_pb_frequency { }
Dollar Sign.et_pb_pricing_table .et_pb_dollar_sign { }
List Item.et_pb_pricing_table ul.et_pb_pricing li { }, or when not available .et_pb_pricing_table li.et_pb_not_available { }
Button.et_pb_pricing_table_button { }
Pricing Title.et_pb_pricing_heading h2 { }
Best Value.et_pb_pricing_table .et_pb_best_value { }
Pricing Top.et_pb_pricing_content_top { }
Standard pricing Table.et_pb_pricing_table { }

Shop

DescriptionSelector
Product.et_pb_shop .product { }
Overlay.et_pb_shop .product .et_overlay { }
And Image.et_pb_shop .product img { }
Sale.et_pb_shop .woocommerce span.onsale { }
Price.et_pb_shop span.amount { }
Title.et_pb_shop .woocommerce ul.products li.product h3 { }
Star Rating.et_pb_shop .woocommerce ul.products li.product .star-rating { }
Deleted price.et_pb_shop .woocommerce ul.products li.product .price del { }
New Price.et_pb_shop .woocommerce ul.products li.product .price ins { }
Product Imageimg.attachment-shop_single { }
Product Title.product_title { }
Shop Price.entry-summary p.price span { }
Description.entry-summary p:not(.price) { }
Product Meta.product_meta { }
Quantity.woocommerce div.product form.cart div.quantity { }
Button.woocommerce .product .cart .button { }
Tabs.woocommerce .product .woocommerce-tabs .tabs li { }
Tab Titles.wc-tab h2 { }
Tab description.wc-tab p { }
Tabs ALL.wc-tabs-wrapper { }

Slider

DescriptionSelector
Previous Slide.et_pb_slider .et-pb-arrow-prev { }
Next Slide.et_pb_slider .et-pb-arrow-next { }
Active Slide.et_pb_slide.et-pb-active-slide { }
Slide Image.et_pb_slider .et_pb_slide_image img { }
Slide Description (This usually controls the height of the slider).et_pb_slider .et_pb_slide_description { }
Slide Title.et_pb_slide_title a { }
Slide Text.et_pb_slide_content { }
Slide Button.et_pb_slider .et_pb_button { }
Active Slide Dot.et-pb-active-control { }
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

DescriptionSelector
Tabs Module.et_pb_tabs { }
All tabs (inside) .et_pb_tabs .et_pb_all_tabs { }
Tab Controls.et_pb_tabs .et_pb_tabs_controls { }
Tabs content.et_pb_all_tabs .et_pb_active_content { }
Active Tab.et_pb_tabs li.et_pb_tab_active { }
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

DescriptionSelector
Testimonial Module.et_pb_testimonial { }
Testimonial Portrait.et_pb_testimonial_portrait { }
Description.et_pb_testimonial_description_inner { }
Author.et_pb_testimonial_author { }
Meta.et_pb_testimonial_meta { }
Meta Links.et_pb_testimonial_meta a { }

Toggle

DescriptionSelector
Toggle Open.et_pb_toggle.et_pb_toggle_open { }
Toggle Closed.et_pb_toggle.et_pb_toggle_close { }
Toggle Open Title.et_pb_toggle.et_pb_toggle_open h5.et_pb_toggle_title { }
Toggle Text.et_pb_toggle_content p:last-of-type { }
Toggle to close.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before { }
Toggle Close Title.et_pb_toggle_close h5.et_pb_toggle_title { }
Toggle Closed Title.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title { }

Video Slider

DescriptionSelector
Video.et_pb_video_slider .et_pb_video_wrap { }
Video Overlay.et_pb_video_slider .et_pb_video_overlay_hover { }
Carousel Item.et_pb_video_slider .et_pb_carousel_item { }
Carousel.et_pb_video_slider .et-carousel-group { }l

Basic Property Reference

PropertyDescription
align-contentSpecifies the alignment between the lines inside a flexible container when the items do not use all available space
align-itemsSpecifies the alignment for items inside a flexible container
align-selfSpecifies the alignment for selected items inside a flexible container
allResets all properties (except unicode-bidi and direction)
animationA shorthand property for all the animation-* properties
animation-delaySpecifies a delay for the start of an animation
animation-directionSpecifies whether an animation should be played forwards, backwards or in alternate cycles
animation-durationSpecifies how long an animation should take to complete one cycle
animation-fill-modeSpecifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-countSpecifies the number of times an animation should be played
animation-nameSpecifies a name for the @keyframes animation
animation-play-stateSpecifies whether the animation is running or paused
animation-timing-functionSpecifies the speed curve of an animation
backface-visibilityDefines whether or not the back face of an element should be visible when facing the user
backgroundA shorthand property for all the background-* properties
background-attachmentSets whether a background image scrolls with the rest of the page, or is fixed
background-blend-modeSpecifies the blending mode of each background layer (color/image)
background-clipDefines how far the background (color or image) should extend within an element
background-colorSpecifies the background color of an element
background-imageSpecifies one or more background images for an element
background-originSpecifies the origin position of a background image
background-positionSpecifies the position of a background image
background-repeatSets if/how a background image will be repeated
background-sizeSpecifies the size of the background images
borderA shorthand property for border-width, border-style and border-color
border-bottomA shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
border-bottom-colorSets the color of the bottom border
border-bottom-left-radiusDefines the radius of the border of the bottom-left corner
border-bottom-right-radiusDefines the radius of the border of the bottom-right corner
border-bottom-styleSets the style of the bottom border
border-bottom-widthSets the width of the bottom border
border-collapseSets whether table borders should collapse into a single border or be separated
border-colorSets the color of the four borders
border-imageA shorthand property for all the border-image-* properties
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box
border-image-repeatSpecifies whether the border image should be repeated, rounded or stretched
border-image-sliceSpecifies how to slice the border image
border-image-sourceSpecifies the path to the image to be used as a border
border-image-widthSpecifies the width of the border image
border-leftA shorthand property for all the border-left-* properties
border-left-colorSets the color of the left border
border-left-styleSets the style of the left border
border-left-widthSets the width of the left border
border-radiusA shorthand property for the four border-*-radius properties
border-rightA shorthand property for all the border-right-* properties
border-right-colorSets the color of the right border
border-right-styleSets the style of the right border
border-right-widthSets the width of the right border
border-spacingSets the distance between the borders of adjacent cells
border-styleSets the style of the four borders
border-topA shorthand property for border-top-width, border-top-style and border-top-color
border-top-colorSets the color of the top border
border-top-left-radiusDefines the radius of the border of the top-left corner
border-top-right-radiusDefines the radius of the border of the top-right corner
border-top-styleSets the style of the top border
border-top-widthSets the width of the top border
border-widthSets the width of the four borders
bottomSets the elements position, from the bottom of its parent element
box-decoration-breakSets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadowAttaches one or more shadows to an element
box-sizingDefines how the width and height of an element are calculated: should they include padding and borders, or not
break-afterSpecifies the page-, column-, or region-break behavior after the generated box
break-beforeSpecifies the page-, column-, or region-break behavior before the generated box
break-insideSpecifies the page-, column-, or region-break behavior inside the generated box
caption-sideSpecifies the placement of a table caption
caret-colorSpecifies the color of the cursor (caret) in inputs, textareas, or any element that is editable
@charsetSpecifies the character encoding used in the style sheet
clearSpecifies on which sides of an element floating elements are not allowed to float
clipClips an absolutely positioned element
colorSets the color of text
column-countSpecifies the number of columns an element should be divided into
column-fillSpecifies how to fill columns, balanced or not
column-gapSpecifies the gap between the columns
column-ruleA shorthand property for all the column-rule-* properties
column-rule-colorSpecifies the color of the rule between columns
column-rule-styleSpecifies the style of the rule between columns
column-rule-widthSpecifies the width of the rule between columns
column-spanSpecifies how many columns an element should span across
column-widthSpecifies the column width
columnsA shorthand property for column-width and column-count
contentUsed with the :before and :after pseudo-elements, to insert generated content
counter-incrementIncreases or decreases the value of one or more CSS counters
counter-resetCreates or resets one or more CSS counters
cursorSpecifies the mouse cursor to be displayed when pointing over an element
directionSpecifies the text direction/writing direction
displaySpecifies how a certain HTML element should be displayed
empty-cellsSpecifies whether or not to display borders and background on empty cells in a table
filterDefines effects (e.g. blurring or color shifting) on an element before the element is displayed
flexA shorthand property for the flex-grow, flex-shrink , and the flex-basis properties
flex-basisSpecifies the initial length of a flexible item
flex-directionSpecifies the direction of the flexible items
flex-flowA shorthand property for the flex-direction and the flex-wrap properties
flex-growSpecifies how much the item will grow relative to the rest
flex-shrinkSpecifies how the item will shrink relative to the rest
flex-wrapSpecifies whether the flexible items should wrap or not
floatSpecifies whether or not a box should float
fontA shorthand property for the font-style, font-variant, font-weight, font-size/line-height , and the font-family properties
@font-faceA rule that allows websites to download and use fonts other than the "web-safe" fonts
font-familySpecifies the font family for text
font-feature-settingsAllows control over advanced typographic features in OpenType fonts
@font-feature-valuesAllows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font-kerningControls the usage of the kerning information (how letters are spaced)
font-language-overrideControls the usage of language-specific glyphs in a typeface
font-sizeSpecifies the font size of text
font-size-adjustPreserves the readability of text when font fallback occurs
font-stretchSelects a normal, condensed, or expanded face from a font family
font-styleSpecifies the font style for text
font-synthesisControls which missing typefaces (bold or italic) may be synthesized by the browser
font-variantSpecifies whether or not a text should be displayed in a small-caps font
font-variant-alternatesControls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-capsControls the usage of alternate glyphs for capital letters
font-variant-east-asianControls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligaturesControls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numericControls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-positionControls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weightSpecifies the weight of a font
gridA 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-areaEither 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
rid-auto-columnsSpecifies a default column size
grid-auto-flowSpecifies how auto-placed items are inserted in the grid
grid-auto-rowsSpecifies a default row size
grid-columnA shorthand property for the grid-column-start and the grid-column-end properties
grid-column-endSpecifies where to end the grid item
grid-column-gapSpecifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the grid-row-gap and grid-column-gap properties
grid-rowA shorthand property for the grid-row-start and the grid-row-end properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the grid-template-rows , grid-template-columns and grid-areas properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
hanging-punctuationSpecifies whether a punctuation character may be placed outside the line box
heightSets the height of an element
hyphensSets how to split words to improve the layout of paragraphs
image-renderingGives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
@importAllows you to import a style sheet into another style sheet
isolationDefines whether an element must create a new stacking content
justify-contentspecifies the alignment between the items inside a flexible container when the items do not use all available space
@keyframesSpecifies the animation code
leftSpecifies the left position of a positioned element
letter-spacingIncreases or decreases the space between characters in a text
line-breakSpecifies how/if to break lines
line-heightSets the line height
list-styleSets all the properties for a list in one declaration
list-style-imageSpecifies an image as the list-item marker
list-style-positionSpecifies the position of the list-item markers (bullet points)
list-style-typeSpecifies the type of list-item marker
marginSets all the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element
max-heightSets the maximum height of an element
max-widthSets the maximum width of an element
@mediaSets the style rules for different media types/devices/sizes
min-heightSets the minimum height of an element
min-widthSets the minimum width of an element
mix-blend-modeSpecifies how an element's content should blend with its direct parent background
object-fitSpecifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-positionSpecifies the alignment of the replaced element inside its box
opacitySets the opacity level for an element
orderSets the order of the flexible item, relative to the rest
orphansSets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
outlineA shorthand property for the outline-width, outline-style , and the outline-color properties
outline-colorSets the color of an outline
outline-offsetOffsets an outline, and draws it beyond the border edge
outline-styleSets the style of an outline
outline-widthSets the width of an outline
overflowSpecifies what happens if content overflows an element's box
overflow-wrapSpecifies 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-xSpecifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-ySpecifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area
paddingA shorthand property for all the padding-* properties
padding-bottomSets the bottom padding of an element
padding-leftSets the left padding of an element
padding-rightSets the right padding of an element
padding-topSets the top padding of an element
page-break-afterSets the page-breake behavior after an element
page-break-beforeSets the page-breake behavior before an element
page-break-insideSets the page-breake behavior inside an element
perspectiveGives a 3D-positioned element some perspective
perspective-originDefines at which position the user is looking at the 3D-positioned element
pointer-eventsDefines whether or not an element reacts to pointer events
positionSpecifies the type of positioning method used for an element (static, relative, absolute or fixed)
quotesSets the type of quotation marks for embedded quotation
resizeDefines if (and how) an element is resizable by the user
rightSpecifies the right position of a positioned element
scroll-behaviorSpecifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump
tab-sizeSpecifies the width of a tab character
table-layoutDefines the algorithm used to lay out table cells, rows, and columns
text-alignSpecifies the horizontal alignment of text
text-align-lastDescribes 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-uprightSpecifies the combination of multiple characters into the space of a single character
text-decorationSpecifies the decoration added to text
text-decoration-colorSpecifies the color of the text-decoration
text-decoration-lineSpecifies the type of line in a text-decoration
text-decoration-styleSpecifies the style of the line in a text decoration
text-indentSpecifies the indentation of the first line in a text-block
text-justifySpecifies the justification method used when text-align is "justify"
text-orientationDefines the orientation of the text in a line
text-overflowSpecifies what should happen when text overflows the containing element
text-shadowAdds shadow to text
text-transformControls the capitalization of text
text-underline-positionSpecifies the position of the underline which is set using the text-decoration property
topSpecifies the top position of a positioned element
transformApplies a 2D or 3D transformation to an element
transform-originAllows you to change the position on transformed elements
transform-styleSpecifies how nested elements are rendered in 3D space
transitionA shorthand property for all the transition-* properties
transition-delaySpecifies when the transition effect will start
transition-durationSpecifies how many seconds or milliseconds a transition effect takes to complete
transition-propertySpecifies the name of the CSS property the transition effect is for
transition-timing-functionSpecifies the speed curve of the transition effect
unicode-bidiUsed together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
user-selectSpecifies whether the text of an element can be selected
vertical-alignSets the vertical alignment of an element
visibilitySpecifies whether or not an element is visible
white-spaceSpecifies how white-space inside an element is handled
widowsSets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
widthSets the width of an element
word-breakSpecifies how words should break when reaching the end of a line
word-spacingIncreases or decreases the space between words in a text
word-wrapAllows long, unbreakable words to be broken and wrap to the next lin
writing-moSpecifies hether lines of text are laid out horizontally or verticall
z-indexSets the stack order of a positioned element
PropertyDescription
.class.introSelects all elements with class="intro"
#id#firstnameSelects the element with id="firstname"
**Selects all elements
elementpSelects all p elements
element,elementdiv, pSelects all div elements and all
elements elementdiv pSelects all p elements inside elements
element>elementdiv > pSelects all p elements where the parent is a element
element+elementdiv + pSelects all p elements that are placed immediately after < div > elements
element1~element2p ~ ulSelects 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]
[attribute^=value]a[href^="https"]Selects every a element whose href attribute value begins with "https"
[attribute$=vale]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"
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each p element
::beforep::beforeInsert something before the content of each p element
:checkedinput:checkedSelects every checked input element
:defaultinput:defaultSelects the default input element
:disabledinput:disabledSelects every disabled input element
:emptyp:emptySelects every p element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled input element
:first-childp:first-childSelects every p element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every p element
::first-linep::first-lineSelects the first line of every < p > element
:first-of-typep:first-of-typeSelects every < p > element that is the first element of its parent
:focusinput:focusSelects the input element which has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects 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-childp:last-childSelects every p element that is the last child of its parent
:last-of-typep:last-of-typeSelects every p element that is the last element of its parent
:linka:linkSelects 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-typep:only-of-typeSelects every p element that is the only p element of its parent
:only-childp:only-childSelects every p element that is the only child of its parent
:optionalinput:optionalSelects input elements with no "required" attribute
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
::placeholderinput::placeholderSelects input elements with placeholder text
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified
:requiredinput:requiredSelects input elements with the "required" attribute specified
:root:rootSelects the document's root element
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all input elements with a valid value
:visiteda:visitedSelects all visited links

CSS Selectors

SelectorExampleDescription
.class.introSelects all elements with class="intro"
#id#firstnameSelects the element with id=" firstname"
**Selects all elements
elementpSelects all p elements
element,elementdiv, pSelects all div elements and all p elements
element elementdiv pSelects all p elements inside div elements
element>elementdiv > pSelects all p elements where the parent is a div element
element+elementdiv + pSelects all p elements that are placed immediately after div elements
element1~element2p ~ ulSelects 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
[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"
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each p element
::beforep::beforeInsert something before the content of each p element
:checkedinput:checkedSelects every checked input element
:defaultinput:defaultSelects the default input element
:disabledinput:disabledSelects every disabled input element
:emptyp:emptySelects every p element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled input element
:first-childp:first-childSelects every p element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every p element
::first-linep::first-lineSelects the first line of every p element
:first-of-typep:first-of-typeSelects every p element that is the first p element of its parent
:focusinput:focusSelects the input element which has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects 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-childp:last-childSelects every p element that is the last child of its parent
:last-of-typep:last-of-typeSelects every p element that is the last p element of its parent
:linka:linkSelects 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-typep:only-of-typeSelects every p element that is the only p element of its parent
:only-childp:only-childSelects every p element that is the only child of its parent
:optionalinput:optionalSelects input elements with no "required" attribute
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
::placeholderinput::placeholderSelects input elements with placeholder text
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified
:requiredinput:requiredSelects input elements with the "required" attribute specified
:root:rootSelects the document's root element
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all input elements with a valid value
:visiteda:visitedSelects all visited links

CSS Units

Relative Lengths
mRelative to the font-size of the element (2em means 2 times the size of the current font)
xRelative to the x-height of the current font (rarely used)
hRelative to width of the "0" (zero)
emRelative to font-size of the root element
wRelative to 1% of the width of the viewport*
hRelative to 1% of the height of the viewport*
minRelative to 1% of viewport's* smaller dimension
maxRelative to 1% of viewport's* larger dimension
%Relative to the parent element
Absolute LengthsExample
cmcentimeters
mmillimeters
ininches (1in = 96px = 2.54cm)
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)

Color values

Hexadecimal ColorsA 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 ColorsRGBA 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 ColorsSL 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.

Source https://www.w3schools.com/cssref/css_colors_legal.asp