{"id":7075,"date":"2024-04-14T17:24:05","date_gmt":"2024-04-14T09:24:05","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7075"},"modified":"2024-04-14T17:24:05","modified_gmt":"2024-04-14T09:24:05","slug":"selectors-style-control","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/selectors-style-control\/","title":{"rendered":"Selectors Style control"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The Selectors Style control presents an entire register of selectors (such as categories, compound categories, and labels) you have produced or revised on your webpage. Here, you can modify labels, look for categories and labels, and eradicate any categories that are not being utilized.<\/p>\n<p>In this tutorial, you will be taught:<\/p>\n<ul role=\"list\">\n<li>What constitutes the Selectors Style control?<\/li>\n<li>The method for changing labels<\/li>\n<li>How to explore the Selectors Style control<\/li>\n<li>How to view styles ahead of time<\/li>\n<li>How to erase idle categories from a webpage<\/li>\n<\/ul>\n<h2>What comprises the Selectors Style control?<\/h2>\n<p>The Selectors Style control, positioned in the left-hand toolbar, showcases a synopsis of categories, compound categories, and labels you have produced or revised on your webpage. You can get to the Selectors Style control by selecting the &#8220;<strong>three droplets<\/strong>&#8221; icon or pressing <strong>G<\/strong> on your keyboard.<\/p>\n<p>In the Selectors Style control, you can adjust labels, preview the styles for a given category or HTML tag, explore existing categories and labels, and tidy up any unused categories on your webpage. Categories and labels manifest in the Selectors Style control in the sequence they were produced.<\/p>\n<h3>Labels<\/h3>\n<p>All the HTML tags you have formatted show up in pink at the upper part of the Selectors Style control. Learn more about HTML tags.<\/p>\n<h3>Categories<\/h3>\n<p>All categories you have formed on your webpage present in blue beneath the tags in the sequence they were produced. Learn more about categories.<\/p>\n<h3>Compound categories<\/h3>\n<p>All compound categories are visible in blue and are nested under each category with a \u201cplus\u201d icon to their left. Learn more about compound categories.<\/p>\n<h3>Nested tags<\/h3>\n<p>All nested tags emerge in pink and are nested under each category with an \u201carrow\u201d icon to their left. Learn more about nested tags.<\/p>\n<h3>Display affected items<\/h3>\n<p>Tap the \u201c<strong>list<\/strong>\u201d icon to the right of a category or tag to witness a registry of elements and components impacted by the category or tag, arranged by:<\/p>\n<ul role=\"list\">\n<li>Elements impacted on the ongoing page<\/li>\n<li>Elements influenced on other pages<\/li>\n<li>Components affected (e.g., the component contains elements using that category or tag)<\/li>\n<\/ul>\n<p>Touch an element in the registry to pick the element on the ongoing page. Alternatively, tap a page title to leap to that page and exhibit a catalog of impacted elements on that page.<\/p>\n<h2>Steps to modify labels<\/h2>\n<p>To transform a category or compound category:<\/p>\n<ol role=\"list\">\n<li>Tap the \u201c<strong>wrench<\/strong>\u201d icon<\/li>\n<li>Alter the category or compound category<\/li>\n<li>Hit the \u201c<strong>checkmark<\/strong>\u201d icon (or press <strong>Enter<\/strong>) to preserve the new name<\/li>\n<li>Tap the \u201c<strong>x<\/strong>\u201d icon to discard the alterations<\/li>\n<\/ol>\n<p>If a category is not implemented on any element on your webpage, a \u201c<strong>trash<\/strong>\u201d icon materializes. Touch the \u201c<strong>trash<\/strong>\u201d icon to instantly eradicate the unused category.<\/p>\n<h2>Exploring the Selectors Style control<\/h2>\n<p>If you employ numerous categories on your webpage, you can investigate the Selectors Style control by category or tag name, in addition to the traits and values attributed to them. For example:<\/p>\n<ul role=\"list\">\n<li><strong>Category or tag names<\/strong> can encompass: button, link, section, etc.<\/li>\n<li><strong>Traits<\/strong> can encompass: display, background-color, font-family, etc.<\/li>\n<li><strong>Values<\/strong> can encompass: 44px, red, #000000<\/li>\n<\/ul>\n<h6><strong>Reminder:<\/strong> Search outcomes exhibit only categories and tags, although matches encompass class and tag names, along with traits and values of categories and tags.<\/h6>\n<p>To explore the Selectors Style control, insert your search term (e.g., \u201clink\u201d or \u201c44px\u201d, etc.) in the search bar. Once you wish to restore the visibility of all categories and tags on your webpage, tap the \u201c<strong>x<\/strong>\u201d icon to erase the search.<\/p>\n<h6><strong>Reminder:<\/strong> Search findings exclusively entail styles applied to elements on your webpage\u2019s primary breakpoint.<\/h6>\n<h2>Previewing Styles<\/h2>\n<p>You can utilize the Selectors Style control to preview a category or tag\u2019s styles before opting to implement it to an element on your webpage. This preview can also aid in determining which idle categories you want to eliminate or safeguard.<\/p>\n<p>To preview styles, hover over the category name or tag name whose styles you intend to preview.<\/p>\n<h6><strong>Reminder:<\/strong> CSS preview solely incorporates styles applied to elements on your webpage\u2019s primary breakpoint.<\/h6>\n<h2>Actions to eliminate idle categories from a webpage<\/h2>\n<p>To erase a category from an element (by removing it from the Selector field in the Style panel) exclusively will not eradicate the category from your webpage. A category can be reutilized at any point to style different elements.<\/p>\n<p>You can entirely remove categories from the Selectors Style control and webpage solely when the categories are not associated with any element.<\/p>\n<h3>Steps to eliminate individual unused categories<\/h3>\n<p>If the category is not utilized anywhere, you can erase an individual category from your webpage. Unutilized categories do not display a \u201clist\u201d icon adjacent to their name in the Selectors Style control.<\/p>\n<p>To remove an unused individual category:<\/p>\n<ol role=\"list\">\n<li>Touch the \u201c<strong>wrench<\/strong>\u201d icon near the category<\/li>\n<li>Click the \u201c<strong>trash<\/strong>\u201d icon to immediately eradicate the unused category from your entire webpage<\/li>\n<\/ol>\n<h3>Steps to eradicate all idle categories<\/h3>\n<p>You can clear out all unused categories from your webpage to diminish the load of your webpage\u2019s code and heighten your webpage\u2019s performance.<\/p>\n<p>To clear out all unused categories:<\/p>\n<ol role=\"list\">\n<li>Click the \u201c<strong>broom<\/strong>\u201d icon at the upper-right part of the Selectors Style control<\/li>\n<li>Tap <strong>Remove<\/strong> to validate category removal<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/6571d949feaa2d3ffdbe9336_styles-screenshot.png\" loading=\"lazy\" title=\"6571d949feaa2d3ffdbe9336_styles-screenshot\"><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the Style selectors panel to rename, clean up, and search for classes and tags.","protected":false},"author":2,"featured_media":5158,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-7075","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=7075"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5199"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}