My code creates CSS divs with dynamic names
i.e.
cke_record_body_19
cke_record_body_54
Is it possible to style all divs that contain the string cke_record_body_ in their name using CSS?
The best cross browser solution is to style them by adding a class to each div.
Can you just have your code give these divs a class="cke_record_body" attribute? Then you can just apply a style to them however you want and ignore the ids.
If you really have to this should work:
div[id*="cke_record_body_"] {
}
Keep in mind I believe this is CSS3 so I have no idea what current support is, but really this is the only way to do it in straight CSS without other libraries. If you are using jQuery or something see Nealv's answer.
sure:
$("[id^=cke_record_body]*").something()
Related
In CSS, there are pseudo elements like "before" and "after". That creates virtual elements before or after an element.
Container pseudo element?
Is there a "container" pseudo element?
Problem example 1:
I need to create 15 borders around an element (I know this particular example can be done by using box-shadow).
Problem example 2:
I need to create 15 transparent background colors on top of eachother.
A lot of unnecessary markup
I know that is possible by adding containing divs, but that creates a lot of unnecessary markup.
The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite... someday.
In other words, there's currently no way to achieve this using only CSS, and there probably won't be any for a while.
Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that's just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled ::outside pseudo-element are described here:
Enable support for CSS3 ::outside pseudoelement
Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way.
The (Fun) Question
How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done using CSS 3).
Sample HTML
<div class="color_contents">#0000FF</div>
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
Currently, there is no way to use CSS to access an element's text content, not even with the CSS3 modules available today.
Regarding this:
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
attr() only looks at element attributes (foo="bar"). Since text content isn't an attribute of an HTML element (despite being a member of the corresponding DOM object), you can't query for it using that function.
There isn't a similar function for accessing an element's text content.
You could do something like this. It's a bit hacky, but all CSS
div.color_0000FF:before{
color:#0000FF;
content: "#0000FF";
}
HTML
<div class="color_0000FF"></div>
Example: http://jsfiddle.net/s8vLy/
The content/attr CSS properties can only be used with :before and :after pseudo-elements.
CSS3 will support attr access from other properties, see https://developer.mozilla.org/en/CSS/attr.
However when/if CSS3 attr goes live, you will still not be able to acces the "contents" of a element from CSS, simply because thats not what CSS is designed for.
Bottom line, use javascript :)
In the image above, most of the html is semantic, using css to manage the look of it all. Despite my best efforts, though, I had to resort to using a table to get the segment on the right to stay where it is and allow its inner elements to wrap fluidly when it gets too big for the screen, like this:
I know that it's preferable if tables are only used for "tabular data," but I have never found a good way to force elements to do this without using tables. Has anybody solved this problem?
have you tried using list-items? Generally when creating menu elements, it's better to use UL->LI instead of span or div
You should be able to set the width of it. This is difficult to do without seeing the exact way you are doing this, because CSS is dependent on parent sizes, etc.
I would look into the CSS property min-width, too.
I have been using the following CSS to apply an effect at the bottom of elements in a menu:
.leftMenuProductWrapper div:last-child{margin-bottom:20px;}
This works fine initially, however after adding more elements in the menu, I realized it was a problem. I really only want to select the last div with .leftMenuProductButton within .leftMenuProductWrapper
Anyway to do this without using Jquery, just pure CSS?
Sounds like http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Might want to check your browser compatibility though.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.