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 am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...
I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...
Incorporating a unique ribbon-style heading that stretches out from the content area on both sides to create a 3D effect using an image background without relying on CSS3 techniques. I experimented with floating elements, negative margins, and relative po ...
Whenever I click on a menu item's main div, its color changes. If I click again, the color remains the same. But now, I want the toggle menu to change its color when clicked, and then revert back to the color of the other parent divs when clicked agai ...
I've been trying to post my content exactly as I submit it, but for some reason, it's not working. When I enter two paragraphs in a post, the output doesn't maintain that formatting. Instead, it removes the paragraph breaks and displays the ...
Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events? I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an opti ...
Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...
Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...
I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...
When I try to enter text into the summernote textarea for space, I keep getting this code: <p><br></p><p><br></p><p><strong style="font-family: "Open Sans", Arial, sans-serif; text-align: just ...
Can anyone help with why my scroll code isn't working? I'm trying to make the scroll go to the bottom when I click on $('#openDiv'). For example, when you enter a chat room on stackoverflow, the scroll is automatically at the bottom, a ...
Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: and below is the HTML code for the page: <div id="free_trial_page"> <div id="f ...
I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expecte ...
http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...
What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...
Looking for a way to collect all selected items from a form and save them in an array, as well as gather the non-selected elements and store them in a separate array. <select multiple id="conditionBad" name="conditionBad"> <option class=" ...
Show the database value in the optgroup option. If the value of the parsing controller is equal to the option's value, do not display it within the HTML tag. Value of the parsing controller: {{$getData->status}} This is how my view blade looks: ...
One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...
Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...
In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...