I am working on a webpage that includes
'<a> <i> <label>'<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>
I want to apply CSS styling with margin-right:10px to any element whose class starts with "icon-".
Here is an example of what I'm looking for:
<style>
.icon-* {margin-right:10px}
</style>
Give this a shot:
[class^="photo-"], [class*=" photo-"] {
padding-left: 15px;
}
here is a helpful tip for styling your classes
[class*="icon-"]{
margin-right:10px;
}To easily target specific classes, you can use the asterisk symbol which indicates that the specified value must be present somewhere in the class name. This method works well for classes like icon-
[class^="icon-"]{
margin-right:10px;
}Another useful selector is the carat symbol, commonly used to signify the beginning of a string in regular expressions. By using this symbol, we can target all elements with a class starting with icon-, as demonstrated in the code snippet above.
You can also opt for utilizing the dash-match syntax:
[class|="icon"]{ margin-right:10px; }
This method will accurately target:
<a class="icon-home"></a>
<label class="icon-pencil"></label>
<i class="icon-display"></i>
...with the added advantage of matching instances like:
<a class="icon"></a> /* No hyphen required */
...while excluding cases like this:
<a class="icons"></a>
/* This won't be selected. "icon" can *only* be followed by a dash */
However, there are certain limitations with this approach:
^=)Test it out here: http://jsfiddle.net/mhfaust/Bh95t/
I have implemented a responsive design approach with the following CSS code: @media all and (max-width:799px){ .bigFont{ font-size: 28px; } } @media all and (min-width:800px){ .bigFont{ font-size: 48px; } } If I want to modify the font size using ...
Styling with CSS #container { min-width: 800px; max-width: 1000px; height: 100%; margin: 0 auto; text-align: left; } #left-section { height: 100%; position: relative; float: left; ...
I understand the philosophy behind the react-testing-library, but I am having difficulty implementing it with CSS properties. For instance, consider a basic toggle component that changes its background color when clicked: import React, { useState } from ...
I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...
.button , button{ border:solid black 2px !important; } Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that? ...
I have a scenario where I receive multiple responses in the form of base64 encoded PDFs, which I need to decode and merge into one PDF file. Below is the code snippet for reference: var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9 ...
When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...
Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...
I'm facing an issue where the grid cells do not move closer together as I resize the window, instead they just stay in their place. I want to achieve a similar layout to . To share my project code, I have uploaded it on codepen: https://codepen.io/Ale ...
I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...
Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...
I am seeking a solution to change the color of the Laravel navigation bar depending on whether it is the live or staging server. Our current setup involves testing code on a staging server before pushing it to the live server in production via Bitbucket. ...
I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...
As a newcomer to the world of web design, I have taken on what seems like a challenging task for me: creating a webpage that can send a query string to the German Railway website (bahn.de) with the parameters I input. My question now is whether there is a ...
How can I pass the selected option value from the login component to the home component without using local storage? When an option is selected in the login component, I want that value to be displayed in the home component. Below is the code snippet: Lo ...
Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...
I am struggling with displaying a chart in my HTML file that should show the details of a specific process from the past few minutes. Whenever I try to initialize the chart using google.charts.load('current', {'packages':['line&apo ...
Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...
I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...
I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...