{"id":36058,"date":"2023-08-03T14:49:32","date_gmt":"2023-08-03T11:49:32","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=36058"},"modified":"2025-02-10T17:55:52","modified_gmt":"2025-02-10T15:55:52","slug":"css-selectors-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/css-selectors-in-elementor\/","title":{"rendered":"CSS selectors in Elementor"},"content":{"rendered":"\n

Selectors are an important part of CSS. The term is also used in Elementor Custom CSS, where it has a slightly different meaning. It’s important to learn the difference when using Custom CSS..<\/p>\n\n\n\n

What is a CSS Selector?<\/h2>\n\n\n\n

In CSS, selectors are used to target parts of the site in order to style them. For instance, if you wanted all the top-level headings in your site to be in a red font, your selector is `h1` <\/em>(the HTML designation for top level headings).<\/em> Following the selector, you add, in brackets, the property you want to affect (such as color<\/em>) and the specific value you want to give the selector (such as red<\/em>). This gives you the CSS code: h1{color:red}<\/code><\/p>\n\n\n\n

In order to make the code clearer and standardized, CSS code is structured as follows:
selector {
    property: value;
}<\/code><\/p>\n\n\n\n

Types of CSS selectors<\/h3>\n\n\n\n

There are a variety of different selectors you can use in CSS. The three most common are:<\/p>\n\n\n\n

Type<\/strong><\/td>Description<\/strong><\/td><\/tr>
HTML elements<\/td>Any of the HTML building blocks – for example, the HTML element `p` which stands for paragraph<\/em>. Using the selector `p`<\/em> you can apply a style to all the text classified as a paragraph<\/em>.<\/td><\/tr>
CSS Class<\/td>You can create a class and then apply a style to everything in that class. For example, if there are several different elements on your site that need to be in your brand color, you can create a class called `my-color` and then apply the color to all those elements. Creating a class<\/a> is usually done at the site level but Elementor has a faster way to create classes.<\/td><\/tr>
CSS ID<\/td>Almost every element can be given a CSS ID<\/a>. You can then target this element using the CSS ID preceded by a #. CSS IDs are unique, and can only be used once on a page. If you want to group multiple elements, use CSS classes<\/a> instead.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

– <\/p>\n\n\n\n

Example of using a CSS selector<\/h3>\n\n\n\n

The following code will turn all the text in blockquotes blue:
blockquote {
    color: blue;
}<\/code><\/p>\n\n\n\n

Using the selector<\/code> keyword in Elementor<\/h2>\n\n\n\n

The Custom CSS feature in the Elementor Editor simplifies the process of creating selectors. <\/p>\n\n\n\n

When you want to apply CSS to an element on your page:<\/p>\n\n\n\n

    \n
  1. In the panel, click the Advanced<\/strong> tab.
    \"\"
    The Custom CSS field is an advanced option.
    \"\"<\/li>\n\n\n\n
  2. Scroll down to the Custom CSS<\/strong> section and open it. <\/li>\n\n\n\n
  3. In the Custom CSS field, enter the word selector<\/code>, the property, and the value.
    \"\"
    In this case, we want to create a red border around the image using CSS. So we’ll enter:
    selector { border: solid red;<\/code>
    }
    \"\"
    The editor automatically knows to define this element as the selector and apply the relevant styles.<\/li>\n<\/ol>\n\n\n\n

    \u00a0[callout type=”tip”]Use the selector keyword for individual elements, not page-level CSS or site-level CSS.[\/callout]<\/p>\n\n\n\n

    Related articles<\/h2>\n\n\n\n