{"id":4783430,"date":"2025-01-03T19:33:43","date_gmt":"2025-01-04T00:33:43","guid":{"rendered":"https:\/\/new.oxygenbuilder.com\/updates\/documentation\/design\/classes\/"},"modified":"2026-02-26T05:07:36","modified_gmt":"2026-02-26T10:07:36","slug":"classes","status":"publish","type":"documentation","link":"https:\/\/oxygenbuilder.com\/documentation\/design\/classes\/","title":{"rendered":"Classes"},"content":{"rendered":"\n<p>Oxygen&#8217;s design system is centered around classes. After you add a class to an element, you&#8217;ll then be able to modify the styles of the class. Classes may be applied to more than one element, and an element may have more than one class. <\/p>\n\n\n\n<p>All classes added in Oxygen may be managed through the Selectors Panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Class<\/h2>\n\n\n\n<p>To add a class to an element:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click into the Classes control or click the <strong>\u2228<\/strong> icon in the Properties panel.<\/li>\n\n\n\n<li>Type in a class name. <\/li>\n\n\n\n<li>Press enter.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Styling a Class<\/h2>\n\n\n\n<p>When a class is selected, there will be various styling options available in the Controls List of the Properties panel. Those properties are a 1 to 1 match with CSS properties, like we explain in the video below.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"If You Know CSS, You Already Know Oxygen\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/2tuLoTDjMd8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Class Actions<\/h2>\n\n\n\n<p>There are several Class Actions available when clicking the <strong>\u2228<\/strong> icon next to the Class.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rename:<\/strong> Change the name of the class.<\/li>\n\n\n\n<li><strong>Duplicate: <\/strong>Create a new class with the same design settings as the current class. <\/li>\n\n\n\n<li><strong>Remove: <\/strong>Removes the class from the currently selected element.<\/li>\n\n\n\n<li><strong>Delete: <\/strong>This will delete the class from Oxygen entirely. <\/li>\n\n\n\n<li><strong>Lock\/Unlock: <\/strong>Locks the class so it is no longer editable. <\/li>\n\n\n\n<li><strong>States:<\/strong> States will allow you to work with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\" target=\"_blank\" rel=\"noopener\">pseudo-classes<\/a> for the selected class.\n<ul class=\"wp-block-list\">\n<li><strong>&amp;:hover<\/strong>: This state will allow you to set the hover styles for the class.  <\/li>\n\n\n\n<li><strong>&amp;:active<\/strong>: This state allows you to control the class when the element is activated by the user.<\/li>\n\n\n\n<li><strong>&amp;:focus: <\/strong>This state lets you set the class design when it has focus. <\/li>\n\n\n\n<li><strong>&amp;:focus-within: <\/strong>matches an element if the element or any of its descendants are focused.<\/li>\n\n\n\n<li><strong>&amp;:focus-visible:<\/strong> Useful for when an element has focus and the user agent identifies that the element should be visibly focused.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Nested Selectors: <\/strong>Nested selectors allow you to create and manage nested selectors for the class. Nested selectors are useful for creating additional pseudo-classes or targeting classes of sub elements within a container.  <\/li>\n<\/ul>\n","protected":false},"featured_media":0,"parent":4783384,"menu_order":0,"template":"","documentation-category":[],"class_list":["post-4783430","documentation","type-documentation","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation\/4783430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":1,"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation\/4783430\/revisions"}],"predecessor-version":[{"id":4851259,"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation\/4783430\/revisions\/4851259"}],"up":[{"embeddable":true,"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation\/4783384"}],"wp:attachment":[{"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/media?parent=4783430"}],"wp:term":[{"taxonomy":"documentation-category","embeddable":true,"href":"https:\/\/oxygenbuilder.com\/wp-json\/wp\/v2\/documentation-category?post=4783430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}