Choose different components that possess the X designation

Can X number of elements (h1, p, span...) be modified only if they have a specific class? I'm searching for a solution like this:

(elem1, elem2, elem3, elem4).class {
  /* add customization here */
}

I previously attempted using parentheses, curly braces, and square brackets. It appeared that curly braces worked, but upon inspecting Firefox's console, it seemed to ignore everything between the beginning and end of the braces. It did work, but applied to elements like div instead of p, span, hX.

Although I am aware that using...

elem1.class, elem2.class, elem3.class, elem4.class {
  /* add customization here */
}

would achieve the desired result, I was hoping for a more concise syntax due to my laziness.

Answer №1

Regrettably, achieving this with pure CSS is not possible.
There simply isn't a syntax for it.

e1.class, e2.class, e3.class is the most concise approach.

Naturally, there are workarounds available.

An alternative is using an extension known as Sass
With Sass, you can write:


e1, e2, e3 {
    &:hover {
        /* Some stuff */
    }
}

There's also any which functions like
:any(e1, e2, e3).class
However, this is only supported in certain newer browsers such as Firefox and Chrome Beta (I believe, but I could be mistaken).

Answer №2

There are some modern web browsers that now support the use of :any (-webkit-/-moz-), for example:

:any(elem1, elem2, elem3 ...).yourclass {
   color: green;
}

Check out this demo (tested on firefox only): http://jsbin.com/IZozOdo/1/
For more information, visit MDN

If your browser does not support this feature, you may want to consider using a CSS preprocessor as suggested by others before.

Answer №3

It seems like there may be a misunderstanding of the question, as using a class selector without a specific tag name should suffice, such as:

.myclass {
 ...
}

This selector will match:

p.myclass, span.myclass, a.myclass, and so on

You can simply omit the tag name from the selector.

UPDATE

As highlighted in a comment on this response - if you want to exclude certain tag names, you either have to use the longer syntax that you dislike or assign a different class name to the elements you wish to target (http://jsfiddle.net/Mm9HX/) - this is what CSS classes are intended for.

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

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

What is the best way to center align a card using Bootstrap 4?

<div class="container"> <div class="row align-items-center h-100"> <div class="col-6 mx-auto"> <div class="card bg-white mx-auto" id="maincard"> <div class="card-body"> ...

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

Python: A comprehensive guide on utilizing find_element_by_css_selector in Selenium

I am attempting to scrape news comments. My goal is to extract the number '72' from this blue-lined HTML code. https://i.sstatic.net/mKC85.png This is the code I have been using: per_male = driver.find_element_by_css_selector('div.u_cbox_ ...

Seeking Assistance with Customizing HTML Uniform Panels

Looking at the HTML provided, I have two requirements: Request: I need to center the green boxes regardless of their height, without having to adjust the top:-10px/bottom:-10px values when the height changes. Eliminate the fixed top/bottom value (as the ...

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the s ...

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

How to customize font styles in AngularJS

I'm attempting to modify the font style of an element when a certain variable is true. Within my controller, I have a variable that retrieves its value. My objective is to adjust the font style depending on this value using ng-style. I've exhau ...

Preview your uploaded image before finalizing

I am currently working on implementing a new upload feature for users of our forum. This feature will allow them to upload a personal picture. Here is what I have developed so far: HTML <label>Profile image</label> <div class="phot ...

Creating a distinctive appearance for JavaScript's default dialogue box

Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...

What is the best way to have gulp monitor my sass file updates and generate a single css file?

I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

What is the method to combine multiple style values in vue.js?

Is there a way to create a div with a box shadow where the values can be changed using a slider? I am having trouble using more than one value stored in a data variable. Any suggestions on how to achieve this? <div :style="{ borderRadius: x_axis y_ ...

Tips for choosing the most current or upcoming item from a list using buttons

I am currently working on a small website project for one of my lessons. The task involves selecting items from a list and using two arrows to navigate to the item above or below the current selection. Here is an example: https://i.stack.imgur.com/FxZCN. ...

The gap between columns in Bootstrap grids

Currently, I am dynamically fetching "boxes" and adding them to the HTML document using ngFor. The number of boxes is unknown in advance. Here is the code I am currently using: <div *ngIf="items && items.length" class="row"&g ...

Avoid flickering of images by properly handling the object URL when setting the image source in an asynchronous pipe

Implementing a JWT authorized endpoint for images has made it impossible to directly link to image urls in HTML. To work around this issue, we have created an async pipe that loads the image with proper authorization (handled by an HTTP interceptor, not s ...