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
Related
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:
using background-image:url(imgurl.png);
using content:url(imgurl.png);
Are both ways correct and valid? Why should I be using one way over another?
Apparently using the second method you cannot set the picture properties like size. But first method is generaly more taught on internet.
Ideas?
It depends on what your image is, just like the debate between using an <img> tag vs using background-image in your CSS.
If your image is part of your page's content, use content:url(imgurl.png);. Certainly if you want the images to be interactive or to to inform the user's experience while on your page, use content. If your image is just stylistic for your site's visual design, use background-image:url(imgurl.png);
Also, do note that you should use double colons: ::before and ::after. Only IE8 requires the single-colon versions.
Do the "::before" and "::after" pseudo elements not work on image elements?
Here's an example I put together...I'm just trying to get a yellow background behind the image here:
http://dabblet.com/gist/3861878
I saw this "answered" (but no other details) in another post, but can't seem to find anything about it elsewhere.
CSS 2.1 spec says:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
http://www.w3.org/TR/CSS21/generate.html
So it it'd be wise to avoid using this. Behavior across the browsers is uncertain and can change in future.
Take for example this code.
So, instead of the <a> tag I want to use an empty div because using text-indent:-9999px is not good for SEO.
To be more clear, I want to achieve something similar with this effect but only with css.
Take a look again on my code to see exactly my approach to achieve this effect.
Also is it possible to add a smooth fade in effect on hover only with CSS?
I don't think that using text-indent has a negative impact on SEO, unless you are wearing a black hat anyway. http://www.google.com/support/webmasters/bin/answer.py?answer=66353
To answer your second question (don't understand the first one), I think for browser compatibility, it's much better to use js (maybe flash) to have a fade in effect. I personally use jQuery, which makes life really easy.
Otherwise, there's the CSS3 property transition-property that one can use http://www.w3.org/TR/css3-transitions/.
EDIT
If I understand the first question correctly, to achieve the effect with the example you gave purely in CSS is hard, at least for now. You're better off using a js library like jQuery for effects like bounce and fade-ins.
Instead of text-indent, you can also use padding.
Basically, set either the height or width (but only one!) of the element to zero and use a padding-top or padding-left to achieve the desired dimensions. Note that overflow: hidden is needed to push out all the content from view and create the "invisible" effect.
Example: http://jsfiddle.net/N8qah/16/
Fancier example with transitions: http://jsfiddle.net/N8qah/18/
Another alternative is to set a line-height on the hidden text that is at least twice the height of the element. But if you have a nested element with text as you do here, you will need to reset the line-height in that nested element. Example of this: http://jsfiddle.net/N8qah/19/
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 :)
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()