Is there some kind of "not" CSS selector?
For example when I write the following line in my CSS, all input fields inside an tag with class classname will have a red background.
.classname input {
background: red;
}
How do I select all input fields that are OUTSIDE of a tag with class classname?
With current browser CSS support, you can't.
Newer browsers now support it- see Sam's answer for more info.
(See other answers for the alternatives in CSS.)
If doing it in JavaScript/jQuery is acceptable, you can do:
$j(':not(.classname)>input').css({background:'red'});
Mozilla supports negation pseudo-class:
:not(.classname) input {background: red;}
See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Note that the negation pseudo class is in the Selectors Level 3 Recommendation and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?
input { background: red; }
.classname input { background: white; }
I would do this
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.
From your question I assume you have markup that looks more or less like this:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:
.formclassname input {
/* Some properties here... */
}
Or
.formclassname > input {
/* Some properties here... */
}
If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.
I think the closest you can get is to only affect direct descendants with a declaration
This code for example will only affect input fields directly under divs with class "maincontent"
div.maincontent > input {
// do something
}
Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.
If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)
Related
Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
In cases you find text in HTML code that is not embeded in any tags such as:
<sometag> ex1 </sometag>
I know many ways to select the text using a p tag or using a class or an id on the div, etc. but my question is: how do you write a css rule for this code as is? Also, I want the rule to be specific for the text so:
sometag {...}
is not desirable because it is more generic.
Thanks for all in advance.
Simply put, no. There is currently no selector to select TEXT only with CSS. You can (and should) use markup to get the result you're looking for:
HTML:
<sometag>
<span>text here</span>
<img src='..' />
some other stuff i don't want to select in my CSS
</sometag>
CSS:
sometag span{
/* do something here */
}
Text nodes cannot have styles applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
The wrapping element can then be selected using CSS based on the element type, ID, class, or document order, but not by content.
You can, however, use jQuery to select by content using the :contains selector: http://api.jquery.com/contains-selector/
If "your tag" is a reserved name, like input, div, etc, you can use this:
e.g
sometag {
border-width: 1px;
}
of course, every tag can receive an id or class, so, you still use for id or class:
id
<sometag id="myid"></sometag>
#myid {
border-width: 1px;
}
class
<sometag class="myclass"></sometag>
.myclass {
border-width: 1px;
}
You can use html:
html {
color: red;
}
or body:
body {
color: red;
}
or select everything with *:
* {
color: red;
}
Is it possible, without using Javascript, to have an anchor i.e.
<a href="#otherlook">
to use extra CSS when selected. For example making the text larger, changing colours?
EDIT
Please take a look at fiddle. What CSS will achieve the second p tag to change upon the anchor being selected?
This will do what you want according to your sample link. It uses the :target pseudo-element. The href must match the id of the element you want to style. Put the styles you want to apply to your paragraph into the p:target class.
Demo: http://jsfiddle.net/ThinkingStiff/9JVpZ/
HTML:
Other Look
<p id="keepnormal">Keep this normal</p>
<p id="other">This to change on select Other Look</p>
CSS:
p:target {
color: red;
}
Output (before click):
Output (after click):
If you don't include IE6, then yes it can be done in a cross-browser safe way:
a[href="#otherlook"] { styles go here }
I stand corrected, it can be done using CSS. See ThinkingStiff's code.
No, you can't do it without JavaScript, but it doesn't require much work.
<a href="#otherlook"
onClick="document.body.className += ' newColorScheme'">Change colors</a>
i use thislink,
HTML :
Stays colored
CSS:
a {
color: black;
}
a:focus {
color:yellow;
background-color: red;
}
No, Ed, there is not.
But using jquery it should be pretty straight-forward:
<head>
...
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
...
</head>
<body>
...
<a href="#otherlook" onclick="$('body').addClass('otherlook'); return false;">
...
</body>
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
If you check the form at this link, you'll see that required fields have a class="required" in the CSS and a * in the markup.
http://drupal.org/user
Can the * which shows in the markup be added entirely with CSS for divs that have this class?
You can use the after pseudo class:
.required:after { content: "*"; }
or, because you explicitly asked for a div with that class:
div.required:after { content: "*"; }
Should work (for IE only since IE8)
You can apply any style to this, of course. You can even do things like this:
div.required:after:hover { /* Hello, I'm a geek. */ }
This can also be achieved with JavaScript. jQuery:
$(".required").append("*");
span:after { content:"*"; }
Demo: http://jsfiddle.net/W3gHU/
You can use the :after or before css pseudo element for this, more info, also abt which browsers support it here.
You could add an image of a star via CSS. This should work in all browsers.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Try this page:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
:after is understood by probably everything except for IE (hopefully IE9 will have support)
Update taking into account comment of Šime Vidas:
it was just example of using. Of course it would bring more sense if we make it this way:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
then we can even add unobtrusive javascript validation to that field (so this way brings good advantages). The problem is that this refactored page will be displayed as we want it only in Opera (I checked it on all last builds of browsers, except for FireFox 4, but I'm not sure FF will change the way they take that style into account).
:after and :before do not work for input and img elements; there is related discussion of why. $(".required").before("*") from jQuery however will work everywhere, but that's more about JavaScript then CSS (and was mentioned before by other people).