Only CSS please!
Basically I want to apply some styles to everything on the page (or almost everything) except for a certain textarea when that certain textarea is :focused.
So, when I focus on the textarea, everything else gets an opacity: 0 or something like that.
I tried fiddling with :not() but I couldn't get it on quite work.
I also might want to expand this to say: apply some styles to everything on the page (or almost everything) except for a certain div when a certain textarea is :focused.
This is kinda an overcomplicated example I was trying to learn from:
http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
There is no way to ascend the DOM hierarchy using CSS, so what you'd want to do is make sure that the relevant textarea is a sibling of the container for anything that you want to have fade out. At that point you should be able to do something like:
textarea:focus ~ section.toFade {
opacity: 0.1;
}
It's an ugly fragile solution (bound by the limitations of CSS), so hopefully this is just an academic exercise.
The closest I could figure was:
*:not(textarea) {
color:red !important;
}
As *:not(textarea:focus) seems to break it.
Related
I've the following problem, I'm trying to change the color of the text of a "< li>" element, in joomla menu. I give the menu a link to css selector called blueMenu, this is my CSS regarding the class:
.blueColor {
color: blue;
}
However this doesn't change the color of the text, on the other hand if I change "color" with "background-color" the background of the text becoms blue. Any idea what may causing the problem?
You dont give much information, but it might be that the li has a child element inside that its overwriting the li styling, make sure you using the style on the last child.
You can also force it with !important;
.blueColor {
color: blue!important;
}
This really much depends on your template.
As already said, reasons can be inline-styles, or may more "distinct" declarations.
If you just specify the class like you did in .blueColor this will be treated with a lower priority as e.g. li.blueColor or to get even more clear both with be treated with a lower priority as e.h. #someId.andClass .subElementClass li.blueColor a.thisIsWhatIsReallyBlue
This is more about CSS specifications than a Joomla-Problem though.
You might check the style that is really applied by just launching your Development-Tools of your webbrowser (for Chrome simply press F12 or right-click on the element and inspect the element directly)
The CSS-Section on the right side might tell you about what really makes the item become blue ;)
Oh, and just a note:
As already mentioned you can use !important to "force" the styles to be applied, but if this is not absolutely necessary, i'd suggest to find the way to override this style on a clean way, since !important, if used to often, might result in a complete mess of your stylesheet.
regards
I'm not familiar with joomla but it may be inserting an inline style to whatever element you're trying to style. Right click on the element and use inspect element (firefox) or just inspect (chrome) to see if any styles were applied.
It'll look like <div class="" style="color: blue;">
I'm using jQuery Mobile to develop some html5 apps, and its a real pain to manually override every single small thing that gets applied to elements on hover, focus and active.
Is there some way to disable the application of these effect, across the board?
If there only were a way to do something like this in CSS?
*:focus, *:hover, *:active {
return; // this would stop any css effects on these events to be applied
}
You can "disable" some styles pretty easily but most will just be a ton of cat and mouse for you to make sure there's no styling applied.
You will need to cover specificity cases if something like an anchor tag might have cursor: pointer and text-decoration: underline as defaults while most other styles will not have this.
Although I recommend against this, if you need to make sure this works will least amount of work you can try adding the !important after each property like below:
*:hover {
outline: none !important;
}
In case you're looking for a "clean" slate to start with, you can use Normalize, and this will reset most of your styles and help them look nice in case browsers are styling them.
I'm trying to select everything but the thing I'm currently clicking on.
Basically, I have a bunch of .node-teaser elements that are all styled the same way and have the same classes, only they get bigger on :active.
When I'm clicking on one, I want to "reset" all other animations/transitions, so that ONLY the current one gets bigger. So, basically, I'd like to:
.node-teaser:not(.node-teaser:active) {
max-height: 50px;
.....
}
However, I can't use pseudo classes as arguments for :not(). How do I solve the issue on a different way, or, am I missing something?
I'm stuck with the classes I have since they're generated by Drupal and I don't really want to get into changing my PHP templates for the theme. And, I want to prove that this works with pure CSS to myself, but I'm stuck.
There is this ~ selector. If there was something to select every element BEFORE the current element (opposite of the tilde selector which selects everything after the element), I could basically add those two up and I'd have everything before and everything after = everything but the current one. I don't think there is a selector that does the opposite of ~ though. Please correct me if I'm wrong!
EDIT:
Since I seem to be quite confusing ^.^ (Sorry for that): on adornis.de I want only ONE item at a time to be expanded, when you click on the second one, the rest should close. Usually :active closes instantly anyways, but I'm delaying the transition.
Solution is: you CAN use pseudo classes, you just cannot have them combined with a real class.
So
.foo:not(.foo:active) {}
doesn't work, but
.foo:not(:active) {}
works just fine :)
This didn't solve my problem, but I guess it's important to understand. I'd still have to mix classes and pseudo classes to achieve my goal.
Conclusion: you can't do this without javaScript (yet)
Thanks to BoltClock who answered this in a comment to the original post :)
You've run into the exact same issue that somebody else did the other day: you can use pseudo-classes in :not(), but in this case you're combining both a class and a pseudo-class, which is not OK
One (I would not say the most beautiful) way to do it is reverting to the default:
.node-teaser {
max-height: 50px;
}
.node-teaser:active {
max-height: auto;
}
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.