concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look?

#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass
#editControl > button
  min-height 0 !important
  border-radius 0 !important

Using just .button as the selector would be simpler, but it brings about unwanted side-effects. The first three selectors' CSS can be found in this source.

csscss-selectorsstylus

Answer №1

Perhaps not the most intelligent inquiry, but I managed to tackle it by initially utilizing:

.mapboxgl-control-container .mapboxgl-ctrl-top-left .button,
#editControl > button

as my selector, which was not being recognized. Delving into 'Chrome developer tools > elements > style' to investigate why it was being overridden, I discovered that a different CSS rule was taking precedence for one of the control elements. This led me to using the following selector that worked effectively in my scenario:

.mapboxgl-ctrl-group > button,
#editControl > button
  min-height: 0;
  border-radius: 0;

Answer №2

CSS 3 introduces mixins, similar to those found in Less or Sass. For instance:

button {
    display: block;
    margin: 10px;
    @apply --button-style;
}

:root {
    --button-style: {
        width: 300px;
        padding: 30px 20px;
        border-radius: 5px;
        background: blue;
        color: #fff;
        font-size: 54px;
        text-transform: uppercase;
    }
}
  .btnOne {
    background: red;
    font-size: 24px;
    padding: 10px;
    border: 0;
}
<!Doctype html>
<html>
<head>
    <title>CSS Mixins</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <section>
        <button class="btnOne"> One </button>
        <button class="btnTwo"> Two </button>
        <button class="btnThree"> Three </button>
    </section>
</body>

</html>

In this illustration, the @apply function serves as a mixin. However, please note that it does not function in IE 9.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

phpcssbuttonwoocommerce

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...

htmlcsshoverz-index

Conceal or style the filter panel in a DT datatable

Here is an example to consider: library(DT) L <- 10 datatable( data.frame( var1 = sapply(1:L, function(x) paste("<X>",paste0(x, letters, LETTERS, "\n", ...

jquerycssrdatatableshiny

The HTML Email Template fails to incorporate certain CSS styles

When attempting to create an HTML Email template that includes a button with a link and has a maximum width with consistent margins on both sides, I encountered some issues. While certain parts of the CSS were applied correctly, others were not displaying ...

htmlcssemail

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Currently working on integrating the angular-2-dropdown-multiselect component: https://www.npmjs.com/package/angular-2-dropdown-multiselect The component functions correctly, but I am looking to adjust its width to fit the container... I believe simply ...

csstwitter-bootstrapangular

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference: This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :) HTML <section class="container ...

htmlcssheighttwitter-bootstrap-3css-tables

What is the process for adding color to the rows of a table?

Hello, I have a table with various fields that include: I am looking to assign colors to entire rows in the table based on certain criteria. For example, if the ASR value falls between 75 and 100, it should be assigned one color; for values between 50 and ...

phpcss

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

csstwitter-bootstrap

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

javascriptcssvue.js

Step-by-step guide on positioning a div below another div and centering both elements horizontally

Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center." The goal is to center the main "border" div in the middle of the screen and align the other elements inside it. ...

htmlcss

Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...

javascripthtmlcss

What steps can be taken to resolve the issue of the <td> element not being allowed as a child of an <a> tag?

https://i.stack.imgur.com/nsdA7.png How can I address these warnings? I utilized the material UI table component and suspect that the warnings are originating from component={Link} to={/patient/${patient.id}} <TableContainer className={styles.tableCo ...

javascriptcssreactjshtml-tablematerial-ui

Content and footer being covered by the sidebar

I have an illustration here to help explain my issue. The problem I am facing is that the Sidebar is overlapping both my Content and Footer when the content consists of only small items. In my _layout file, I'm referencing the sidebar like thi ...

asp.netcssasp.net-mvc-3razor

Modify the button's background color for Django's image upload field

In one of the forms in my Django application, I have included a field that allows users to upload an image. Here is the code for this field: image = models.ImageField(upload_to=upload_location, null=True, blank=True) To display this field in my form tabl ...

htmlcssdjangobutton

The media query will only impact elements and classes within the index.html file, and will not apply to any other

As I strive to optimize my website for mobile devices, I am encountering an issue with my media queries. The classes don't seem to respond appropriately on any page other than the index.html, and I'm struggling to identify the root cause. Index. ...

htmlcssroutesmedia-queriesmeta-tags

Enhancing elements with CSS by adding transformations and box shadows upon hovering

My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space ...

cssmaterial-uitransformcard

What causes Selenium tests to run so slowly?

I am currently developing a web scraper that is designed to download images in a completely legal manner. However, I have encountered a problem during the execution of the script. In certain instances, particularly after a page has finished loading, there ...

rubyseleniumcss-selectorsselenium-webdriver