Add a class or ID to a component

Code Library
1

Add a class or ID to a component so that it can be referenced with CSS or JavaScript

Adding a class or ID to an HTML element allows you to reference it in your CSS or JavaScript. You can do exactly the same thing with components. For example, a text component may look like the below code:

HTML

<fl-text cid="12345">...</fl-text>

But we can add a class of ‘highlight’ and an ID of ‘first-section’ to the component. The class and ID names we choose can be anything we want but they can’t have spaces. See the example below:

HTML

<fl-text cid="12345" class="highlight" id="first-section">...</fl-text>

You can then reference this in CSS and JavaScript in the following ways:

CSS

#first-section { /* Styles for first-section go here */ }
.highlight { /* Styles for highlight go here */ }

JavaScript

var firstSection = $('#first-section');
var highlight = $('.highlight'); // If you have more than one element with the class - this returns an array of all the elements with the same class

In certain cases, you may want to reference an element inside a Fliplet component, eg. the text spacing within a section of the list component. It’s not possible to do this in the Developer Options (access is limited to help maintain the integrity of the components). However, you can reference elements inside a component indirectly.

Most of the elements inside of a component will already have a class associated with them. You can find that class by using your browser’s developer tools (more details here).

You can then effectively reference that element by adding the class or ID to the parent component. When referencing the element you use the parent class or ID, then a space, then the child element’s class or ID. In the example below our child element has a class of “child” which we’ve looked up with the developer tools. To reference it we can add a class to the parent called “parent”. The CSS would then look like this:

CSS

.parent .child { /* Styles go here */ }

And the JavaScript would look like this:

JavaScript

var highlight = $('.parent .child');