Can selectors be grouped together for easier organization?

Seeking to style all child elements like div, table, ul, dl, under a specific selector using LESS.

It would be great if I could do something along these lines.

.myclass {
  ...

  &.otherClass > (div, ul, dl, table) {
    // define some rules...
  }
}

I anticipate the following result.

.myclass.otherClass > div,
.myclass.otherClass > ul,
.myclass.otherClass > dl,
.myclass.otherClass > table {
  // rules
}

However, it seems that the parentheses are not supported as is, leading to an invalid CSS output upon compilation.

Is there an alternative syntax or method to achieve this kind of shortcut in definitions?

Answer №1

Here is your solution:

.myclass {
  ...

  &.otherClass {
    > div, > ul, > dl, > table {
         // define some rules...
    }
  }
}

In response to your feedback, eliminating the > selector after the initial selector will result in a different outcome:

For instance,

div {
    > span, p, a {
     border:1px solid #333;
    }
}

translates to

div > span, div p, div a {
    border: 1px solid #333;
}

Meanwhile, this example

div {
    > span, > p, > a {
     border:1px solid #333;
    }
}

translates into

div > span, div > p, div > a {
    border: 1px solid #333;
}

Answer №2

In addition to randy's approach, a different solution involves creating a variable for .otherClass and >:

@defineSelector: .otherClass >;

.myclass {
  display:block;
  &@{defineSelector} {
    div, ul, dl, table {
      color:red
    }
  }
}

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

Switch up the background image of the <li> element when the <a> tag is clicked

html: <ul> <li id="Co" class="libgc" ><b>CO</b></li> <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li> </ul ...

jquery html css anchor background-image

Adjust the size of the input form

Trying to create this design: https://i.sstatic.net/rPSiN.png But currently stuck with this layout: https://i.sstatic.net/3k5bE.png I'm puzzled on how to resize the input field with an icon on the right while using col-md-12... Check out my code ...

html css reactjs react-css-modules

Is specificity a characteristic of JavaScript?

After setting a div in my HTML file to have a height of 100px and a width of 100px, I attempted to retrieve the height using JavaScript. This is what I tried: console.log(document.GetElementById("box").style.height); // The div had an ID of "box" and w ...

Creating a responsive image using Bootstrap with an SVG filter applied

I've been working on applying an SVG filter to responsive images in Bootstrap 4 by using the class "img-fluid" However, I'm facing an issue where the separation between images varies across different resolutions. It's fine on desktop, but o ...

css svg bootstrap-4 responsive fluid

Press the button obscured by an image

Recently on my HTML website, I encountered an issue where I tried adding a transparent image over a button but found that I was unable to click on the button afterwards. The problem seems to be related to the following code snippet: #container { heigh ...

javascript jquery html css web

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

UPDATE 2 SITUATION To prevent access to quiz content until the page is refreshed, I am employing a semi-transparent image with a top-margin off-set. The following code functions flawlessly on one specific page and only once: JavaScript window.addEventL ...

javascript html css

Using jQuery to pass UI positions as percentages instead of screen positions

Currently, I have implemented the following code to send $_GET values to a PHP page: $.get('/includes/sticky_notes/update_position.php',{ x : ui.position.left, y : ui.position.top, z : zIndex, id : parseInt(ui. ...

jquery html css

Enhance User Experience in IE11 by Providing Font Size Customization with Angular (Using CSS Variables)

I am in the process of developing an Angular application. One of the requirements is to allow the user to choose between small, medium, or large font sizes (with medium being the default) and adjust the font size across the entire webpage accordingly. Wh ...

html css angular internet-explorer-11 css-variables

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

html css twitter-bootstrap bootstrap-4

Switching background image when hovering over a link purely through CSS

I'm attempting to achieve a similar effect on my website, like this example: (scroll down to "we specialize in") I am fairly inexperienced with HTML and CSS, and I'm working within WordPress which adds an extra layer of complexity. I started my ...

html css image hover

Using Vuejs to dynamically apply a class and trigger a function based on a specified condition

I am currently facing three small issues in my Vue app. The first problem involves class binding. I have a bootstrap card that displays a question and its related answers. When a user clicks on a radio input, their answer is saved and the other options are ...

javascript css vue.js bootstrap-5

Expanding sidebar height to match parent using Flexbox

Looking for the best way to adjust a child element to match the height of its parent? I've experimented with various techniques, but haven't had much success. I'm leaning towards using flexbox as it seems to be the latest trend. Here's ...

html css flexbox bootstrap-4

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

I have a complex web application interface with a dedicated area for content display. Is there a way to ensure that when users utilize the browser's text search function (CTRL+F), the UI elements are ignored and only the actual content is searched? ...

javascript html css

Eliminating the boundaries of Bootstrap accordion

I'm currently working on creating Bootstrap accordion menus and I'm attempting to remove the border that appears when it's collapsed and expanded. Below is the code I've been working on: <div class="accordion"> <div ...

html css bootstrap-4

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

html css angular8

JavaScript Animation of Text

I have a challenge where I want to animate text's opacity in JavaScript after the user presses enter. However, I am struggling to achieve this with my current code. I can provide all of my code for you to review and help me understand why the animatio ...

javascript html css animation text

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

html css iframe

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

html css twitter-bootstrap popup

CSSer Q&A