I need to select only those elements that have pseudo-elements ::before & ::after (not necessarily at the same time). Also, I need to apply styles to these pseudo-elements.
I thought this solution would work:
*:has(::before, ::after) {
content: '';
/* Something else ... */
}
Related
Can something like this be written using the :is() pseudo-class?
div p,
div p::before,
div p::after {
/* selectors */
}
I tried this but it didn't work:
div :is(p, p::before, p::after) {
/* selectors */
}
No you cannot.
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). ref
The purpose of the question is to investigate the possibility of doings something like:
.element:before {
content: 'before';
color: orange;
}
.element:after {
content: 'after';
color: green;
}
.element:after:hover + .element:before {
color: red;
}
<div class='element'> </div>
Pseudo-elements cannot be targeted by sibling combinators because sibling combinators only represent element siblings, not pseudo-element siblings.
So, although the boxes generated by ::before and ::after are siblings of one another in terms of layout, for the purposes of sibling combinators they are not.
It is not possible to write a selector styling an element's ::before pseudo-element when its ::after pseudo-element is hovered. (For that matter, ::after:hover is not valid outside of Selectors 4 either, and no implementations exist.) There are hacks that make use of things like pointer-events but there is nothing that is guaranteed to work on all browsers.
I know it is strange, but how can I select all the IMGs in a document which don't have a source (I am talking about the CSS selector)
That is, I want to select
<IMG>
but not
<IMG src="/my_file.png">
The answer is
img:not([src]) {
/* style here */
}
You need to use :not selector
img:not([src]) {
/* style here */
}
Hello is there a way with css to style the 2nd element on page with the same class slightly differently to the first.
For example I have two ul's on a page with a class of topbardropdownmenu. I want to give the 2nd ul a differen't background to the first. Is there a way to do this with out altering the html?
You can do it with the :nth-child() pseudo-selector. It is CSS3 though, and not supported in some browsers (e.g. <=IE8 & <=FF3.0 doesnt support it).
.topbardropdownmenu:nth-child(2) { background: #FF0000; }
You could do it with JavaScript in a cross-browser compatible way though, if that's an option for you.
What holds the <ul> elements? I'll assume a <div id = "lists">
/* First element */
div > ul.topbardropdownmenu:first-child{
}
/* Rest of the elements */
div > ul.topbardropdownmenu{
}
...alternatively
div > ul.topbardropdownmenu:not(:first-child)
It depends which browsers your users are using, you might be able to use the nth-of-type css pseudo-selector:
ul.topbardropdownmenu:nth-of-type(2) {
/* styles the second ul of class=topbardropdownmenu
}
If there's a particular pattern to the occurrence of these ul elements, you could use descendant and/or sibling selectors:
div > ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that are the immediate descendants of a div */
}
p + ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that immediately follow a p */
}
Look at the CSS3 nth-child() pseudo-class.
You can use :nth-child http://css-tricks.com/how-nth-child-works/ but IE may struggle with it. Consider this jQuery alternative:
$(".class").eq(1).css();
http://api.jquery.com/eq/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.
For example, say I have a table with classname "test" nested inside a div. Is there some sort of:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.
That's what jQuery is for :-)
You can use has():
div:has(> .test) {
/*styling, for div, not .test ...*/
}
In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.
div:not(:empty) {
// your styles here
}
However I'm not sure if all browsers support this.
div:not(:empty) {
margin:0;
}
is NOT recognized by http://jigsaw.w3.org/css-validator/ as CSS2
it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in
div.myclass { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }
good luck
Mike
:empty pseudoclass supported by Firefox, but is not compatible with IE.
But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm . Saved my bacon