Is it possible to use attribute selectors to partially-search an inline style attribute?
Can anyone find a way to get this bit of code working?
http://jsfiddle.net/v4xPY/1/
It seems that it's not possible to do this .hidden[style*="display: block"] + .below, nor even just [style]
The attribute selector you're trying to use isn't legit CSS, though it is a jQuery attribute selector. As far as I know, CSS is limited to [attribute=value], [attribute~=value] and [attribute|=value]. (derp, see below)
But, since you're already using jQuery to toggle the hidden div, it'd be a lot simpler to just toggle a class on the below div at the same time, rather than wrestling with the attribute selector (unless there's more to it than that).
Modified jQuery:
$(function() {
$('html').click(function() {
$('.hidden').slideToggle();
$('.below').toggleClass('yellow');
});
});
and CSS:
/* Margin of Below should reduce when hidden is opened */
.yellow {
margin-top: 10px;
background: yellow;
}
Fiddle here.
Edit: Okay, I was way off on the bit about the attribute selectors, it is legit CSS3; I don't know the details on browser support, though I'd guess it'd be supported in all the usual "modern" browsers. Also, there's apparently a problem with IE7 targeting the style attribute specifically. There's a pretty good write-up at http://www.impressivewebs.com/attribute-selectors/.
Once more: Though I can't find anything that explicitly confirms this, it looks like the attribute selectors only apply to attributes that are actually hardcoded into the html; basically it's just parsing strings, not examining the dom elements' "states" as such?
Related
I am getting an html file as a string and I need to change the styling that are coming in to prevent it from changing the parent styling.
Instead of going through each style and changing it from
.inner-div{height: 50px;}
to
.outter-div .inner-div{height: 50px;}
on each element, I would like to do something like
.outter-div {
.inner-div{height: 50px;}
.inner-div2{height: 50px;}
}
however that does not work
Is there a way to have multiple attributes nested inside of another attribute, instead of having to add the parent on each attribute?
To do something like that, you'd have to use a CSS pre-processor.
Two popular candidates are Less and Sass.
Less and Sass extend CSS to provide extra features, including the ability to nest multiple attributes. This Less or Sass code is then fed into a pre-processor, which transforms it into standard CSS that a browser understands and can be deployed as part of your website or app.
Assuming the inner class names all start the same (with 'inner'), then this can be done with an attribute selector. like this:
.outer-div [class^=inner] {
height: 50px;
}
Demo
If this is not the case, then...use a CSS preprocessor like others have mentioned.
PS: just for the record...
CSS selectors level 4 has added the :matches pseudo-class in order to group selectors more easily.
The syntax looks like this: :matches( selector[, selector]* )
In your case, it would be:
.outer-div :-matches(.inner-div, .inner-div2 ) {
height: 50px;
}
You can read more about it this CSS-tricks post
NB:
Currently there is no browser support for :matches, however the :matches pseudo class was once called :any in the spec, supported with -moz- and -webkit- prefixes. See MDN on :any
Here's a working example for webkit using :any:
Codepen
This works, but actually I've never come across it earlier. Does it have some "weak spots"?
div.floated { float: left; }
div.floated+* { clear: both; }
Though I did not notice any "side effect".
You can use it at your will, although according to MDN, you should take into account that universal selector is the most expensive CSS selector in terms of webpage performance.
Universal CSS Selector Performance
Here some problems I see:
"floated" is not a semantic class name.
This will clear adjacent elements after divs with the "floated" class, but not anything that is floated by other means.
In most designs I work with, I don't want to clear adjacent elements. Now I'll have to write more CSS to undo this.
I think I don't understand the value of this.
I'm reading the book: CSS Mastery: Advanced Web Standards Solutions, and finding the css code inside is almost writed in this format:
elementName#idName
elementName.className
but, I'm used to write code ignoring element name with this format:
#idName
.className
so, I want to figure out what difference is between the two format.
Actually, I understand when should use type.class. And, I just want to find out the impact when I use type.class insead of only using .class when there is only one kind of tag here.
There must be some impact on performance.
Here's a real life scenario as when to use elementName and when to just use class or id name:
HTML:
<a class="blue">I'm blue and underline</a>
<span class"blue">I'm blue and bold</a>
CSS:
.blue {
color:blue //will make both <a> and <span> blue
}
a.blue {
text-decoration:underline // will make only the <a> tags underline
}
span.blue {
font-weight:bold //will make only the <span> tags bold
}
but remember when it comes to IDs you should not have duplicate IDs on your page anyway, this is more practical for classes
The difference between the two is that the first:
element.class
Is calling the element with that specific class.
And the second:
.class
Is calling all elements that contain this class
I think that the element inclusion in the selector is a holdover from days where some browsers required it (I think IE5 does, but I could be wrong). This is no longer necessary, and it does not make sense to include element selector for at least three reasons:
It slows the selector down since the element selector is slower than the other two -- especially id. Assuming selection is optimized so that fast selection is done first (e.g. the element with the matching id is found before the element selector is checked), there is still the additional step of checking the element selector.
It's not as extensible since you can't change the element without also having to change the selector. The implication is also that div.class would function differently than label.class, but I think that the class should be descriptive enough.
It changes the specificity of the selector. This could be very frustrating for some developers who may want to change <div class="foo"> from green to red:
div.foo { color: green; }
/* below is not applied since the above has higher specificity */
.foo { color: red; }
I've never heard an argument that supports type.class unless old browsers need to be supported.
I've just noticed that Webkit now has some support regarding the CSS Values and Units Module Level spec. And I was wondering if anyone knows if there is a way to reference another CSS selectors (or DOM style) property from a CSS selector?
I'm expecting something like this to be the answer here. Which I know is most likely the case for current browser implementations; but please keep reading...
For instance, in the case where an animation might resize an element (NOTE the ${.element2.width} is fictitious syntax):
<style type="text/css">
.element1 {
.width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width});
}
.element2 {
.width: 100px;
}
.element2:hover {
width: 200px;
transition: all 0.4s ease-in-out;
}
</style>
In this case I would expect the .element1's width to be re-evaluated based off the transition triggered from the hover events on .element2.
I realize that the aforementioned spec. is only a working draft but perhaps the syntax for referring to such a 'referential selector property' is defined within another spec. which I'm yet to discover? Or simply just not a case for concern (thanks to an overlooked work around)?
I added an answer to the question you linked: https://stackoverflow.com/a/11071806/137626
You can use the same declaration block with as many selectors as you want by grouping them (selectors are separated by commas)
You can't reuse the same declaration block later with a different CSS selector without rewriting the whole declaration block preceded by this selector or using a preprocessor/macro that'll do that for you. Or add it to the existing declaration block as above
Now with your example of an element resized by CSS itself: you could use CSS3 Media Queries and its #media rules containing as many declaration blocks as you want. These media queries would adapt to the width of viewport here.
Mixing expanding elements via animation and media queries that would've the reverse effect will be very soon very complicated (and I'll wonder what content you're playing with); if you want to Keep It Simple, then JS is the way to go. There are variables, loops, events ;) and you can start a CSS3 animation by adding or removing a single class from an element (or whatever CSS selector).
CSS3 won't replace JS (and you shouldn't use JS to style HTML as JS isn't activated or existing everywhere and there's already a nice fallback named CSS).
Other than using a pre-compiler such as sass/scss or less, I believe all you can do is wait or hard-code it.
Is there any way with CSS to target all inputs based on their type? I have a disabled class I use on various disabled form elements, and I'm setting the background color for text boxes, but I don't want my checkboxes to get that color.
I know I can do this with seperate classes but I'd rather use CSS if possible. I'm sure, I can set this in javascript but again looking for CSS.
I'm targeting IE7+. So i don't think I can use CSS3.
Edit
With CSS3 I would be able to do something like?
INPUT[type='text']:disabled that would be even better get rid of my class altogether...
Edit
Ok thanks for the help! So here's a selector which modifies all textboxes and areas which have been disabled without requiring setting any classes, when I started this question I never thought this was possible...
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
This works in IE7
Yes. IE7+ supports attribute selectors:
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.
Other safe (IE7+) selectors are:
Parent > child that has: p > span { font-weight: bold; }
Preceded by ~ element which is: span ~ span { color: blue; }
Which for <p><span/><span/></p> would effectively give you:
<p>
<span style="font-weight: bold;">
<span style="font-weight: bold; color: blue;">
</p>
Further reading:
Browser CSS compatibility on quirksmode.com
I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.
Sadly the other posters are correct that you're
...actually as corrected by kRON, you are ok with your IE7 and a strict doc, but most of us with IE6 requirements are reduced to JS or class references for this, but it is a CSS2 property, just one without sufficient support from IE^h^h browsers.
Out of completeness, the type selector is - similar to xpath - of the form [attribute=value] but many interesting variants exist. It will be quite powerful when it's available, good thing to keep in your head for IE8.
w3 reference
browser support reference
You can do this with jQuery. Using their selectors, you can select by attributes, such as type. This does, however, require that your users have Javascript turned on, and an additional file to download, but if it works...
Sorry, the short answer is no. CSS (2.1) will only mark up the elements of a DOM, not their attributes. You'd have to apply a specific class to each input.
Bummer I know, because that would be incredibly useful.
I know you've said you'd prefer CSS over JavaScript, but you should still consider using jQuery. It provides a very clean and elegant way of adding styles to DOM elements based on attributes.