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 */
}
Related
I have an anchor that links to an element using data-attributes for which need special styles when targeted.
My logic
span[data-anchor="my-data"]:target {
/* styles */
}
anchor
<span data-anchor="my-data">My Data</span>
I'm using Shortcodes Ultimate (WP)
https://gndev.info/shortcodes-ultimate/
:target works on the currently active anchor
it doesn't really need a selector
try something like this:
html:
anchor
<span id="my-data">My Data</span>
css:
:target {
background-color: red;
}
see a working example here-
https://jsfiddle.net/0fkh8n09/
As an example I got a css class which applies to all labels within my website.
label
{
font-size: 18px;
}
Now after i install a external JS plugin i find that the plugin itself is affected by my base css.
<div>
<div class="plugin" />
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
The plugin has its own stylesheet so how can i prevent my base css style touching any elements within the plugin div?
EDIT
I must add that label was a very simple example. The actual layout is more complex with global styles touching various elements.
Don't make your css too general, try to be as specific as possible when you want to style only some of your elements. If you can't select your elements without affecting the plugin's elements add a class to them.
label{ /* too general, don't use this */
/* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
/* ... */
}
label.noplugin{ /* use a class on non-plugin elements */
/* ... */
}
div:not(.plugin) > label{ /* affecting only children of div which are NOT
tagged with the plugin class */
/* ... */
}
So in your case a better way to style your label would be
<div>
<div class="plugin">
<label>Xyz</label>
//Dynamic html inserted by plugin
</div>
</div>
CSS:
*:not(.plugin) > label
{
font-size: 18px;
}
Please note that :not is unfortunately not supported by IE ≤8.
You need to do two things.
i) Give your parent container ID
ii) And style child label of container.
Here is fiddle workout.
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 seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.
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