I have few elements with the same property once its hovered over. I would like to know if I can set all those element at once such as below
#el1:hover el2:hover el3:hover .test{
}
I know the normal way would be
#el1:hover .test{
}
Is it possible to do something like this or similar on css, Please few free to update the question title as I found it hard to describe the problem.
You can do it like this:
#el1:hover, #el2:hover, #el3:hover .test{
// some code
}
To have a deeper understanding of CSS Selectors read
CSS Selectors
Combinators and groups of selectors
If the id of the parent elements starts with el you can use the [attr^="value"] starts-with attribute selector.
[id^="el"]:hover .test{
// some code
}
Otherwise you will have to use the , to separate the selectors
#el1:hover .test,
#el2:hover .test,
#el3:hover .test{
// some code
}
Finally you could add a common class to the parent elements so that you can target it directly
<div id="el1" class="common-class">
<span class="test">..</span>
</div>
<div id="el5" class="common-class">
<span class="test">..</span>
</div>
and use
.common-class:hover .test{
// some code
}
Yes it will be work, you just need to add comma after each class or id. That comma will seperate the css class or id and style will be apply on all mentioned classes, ids or element references.
#el1:hover, #el2:hover, #el3:hover .test{
some style
}
CSS Group Selector
When you apply same css style properties on diffrent elements using Classes, ID, or references is called group selector.
For example if you want to make color of following elements
<h2>Group Selector Heading</h2>
<p>Group Selector Paragraph</p>
<div class="container">Group Selector Container</div>
<span id="message">Group Selector Message</span>
You can apply color on all above elements by using group selector method. It will minimize the code.
h2, p, .container, #message{
color:#FF0000;
}
<!DOCTYPE html>
<html>
<head>
<style>
#el1:hover, #el2:hover, #el3:hover , .test{
color:orange
}
</style>
</head>
<body>
<h1 id="el1">My First CSS Example</h1>
<h1 id="el2">My First CSS Example</h1>
<h1 id="el3">My First CSS Example</h1>
<h1 class="test">My First CSS Example</h1>
</body>
</html>
Related
<div class="wrapper">
<!--
Several random elements that I'm not able to predict.
div, p, h3, etc.
-->
<div class="foo">...</div>
<!--
Could have only 1 .foo, 2 .foo, or 3, 4, 5 .foo...
-->
<div class="foo">...</div>
<!--
Also several random elements
-->
</div>
HTML code is something like above. Now I know the reason why div.foo:first-of-type doesn't work. But is there any alternative solution?
How can I select the first .foo? How can I select the last .foo? Of course via pure css...
Thanks!
How can I select the first .foo?
The technique described here: CSS selector for first element with class:
div.foo {
/* Style all */
}
div.foo ~ div.foo {
/* Revert styles for all but the first */
}
How can I select the last .foo?
The technique described above relies on sibling selectors and overrides. The biggest limitation of sibling selectors is that they only work in one direction, and since they work for the first element by overriding for all elements after the first, they won't work for the last because you can't select siblings that come before some other element using sibling selectors.
There is no pure CSS alternative.
Any HTML5 browser will let you use nth-of-type as it is intended...
I am not saying this is a recomended technique, I am just showing how this option works ...
I don't know if you will like it or not, but AFAIK is the only way to get what you want for the last one (as BoltClock says)
foo:first-of-type {
background-color: lightgreen;
}
foo:last-of-type {
background-color: lightblue;
}
<div>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
<div>div</div>
<foo>foo</foo>
</div>
you can use first-child, and last-child
html
<div class="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
css
p:first-child {
color: red;
}
p:last-child {
color: green;
}
Here's a JsFiddle Example
Beware that last-child is only supported since IE 9, and first-child is supported from IE 7
I'm trying to figure out why the first class in my css is taking precedence, I thought if you call two classes, the last class gets the call.
Here is my example:
Test CSS Precedenceenter code here
<style>
/* Scenario 1 */
.blue { color:blue; };`enter code here`
.red { color:red; };
</style>
</head>
<body>
<div class="red blue">Red Blue</div> <!-- CSS Specifity (0,0,2,1) -->
<div class="blue red">Blue Red</div> <!-- CSS Specifity (0,0,2,1) -->
</body>
</html>
The CSS is invalid, it should look something like this:
.blue { color:blue; }
.red { color:red; }
Take a look at CSS syntax documentation. The semi-colon ; shouldn't appear outside of the curly brackets. Because of this error, the styling from .red wasn't being applied to any elements at all.
Aside from that; a stylesheet is cascade. It is read from top to bottom, therefore if an element contains both classes (regardless of order), .red will still overwrite .blue because it appears later in the stylesheet. (example here)
As Josh said, the later specified attribute is the one that will have greater importance. Have a read through this article on CSS specificity if you'd like further clarification.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Does someone know how to use the CSS selector :not() as #some_id:not(.any_class_name)?
The code looks as if it is right, but it doesn't work. Is there another way without the not selector? I couldn't find anything on the Internet.
I am making a web application, which includes more than one page, but several pages have divs with id=some_id. I thought I had to add specific CSS by adding any_class_name one time using the above CSS code solve the problem, but it doesn't work.
I believe that you are reversing the selectors. You have some elements with the same class, but you want to filter out an element with an specific ID. In that case:
HTML:
<p class="someclass">hello</p> <!-- will be targeted by css below, thus green -->
<p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->
CSS:
.someclass:not(#some-id){ color: green; }
/* selects all elements with classname 'someclass',
but excludes the one that has also has an id of 'some-id' */
And as #secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.
This will set all the backgrounds except the ones that has <a></a>:
:not(a)
{
background: gray;
}
I hope this will help you.
Demo
Another way is:
You can override the css. May be you want something like this.
<div id="demo">
<p class="class">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Your css
#demo
{
color:#0000ff;
}
.class
{
color:#ff0000;
}
How can I set the style of only the first div that has class "bla"? (not the second).
<div class="outer">
<div>
....(more div's, unknown how many)
<div class="bla">
....
<div class="bla">some content</div>
</div>
....
</div>
</div>
I'm assuming with this answer that by adjacent elements you mean sibling elements. If you were referring to parent-child elements then go with N1xx1's answer. That being said...
You can't target the first bla with css selectors alone. But you can target all the blas but the first. So, one possibility is to set the styles you want only on the first bla on all blas. Then override those styles by targeting all blas but the first. Like so:
.bla {
...styles for the first bla..
}
.bla ~ .bla {
...override styles set on first bla that you dont want on the others
}
The tilde between the two ".bla"'s is called the general sibling selector. If you've never heard of it, head on over to css selectors spec.
You can do simple workaround for this since you can't do that with any special selector:
.bla {
/* style here, example: */
background-color: #f00;
}
.bla .bla {
/* negate the style, example: */
background-color: transparent;
}
I hope this is what you were looking for.
According to pure css, you can't select according to the ordering of the html elements. Search the spec (here: http://www.w3.org/TR/CSS2/selector.html). There is nothing that refers to how many or in what order html elements match the given selectors.
Javascript:
getElementsByClass('bla')[0].style
EDIT: JOPLOmacedo provided a CSS only (better) answer
I've also found a way to select for instance the second <p> after a <h1> tag:
h1 + p + p{
background: red;
}
Just thought I'd share that.
<div id="tt">test1</div>
<div id="blabla">test2</div>
<div id="test">
<div id="blabla">test3</div>
<div id="tt">test4</div>
</div>
<style>
#tt {color:blue;}
#blabla {color:green;}
#test #tt, #test #blabla etc... {color:red;}
</style>
Is there a way to avoid repeating #test?
Thanks ;)
For the particular example that was the question before it underwent major revisions:
* { color: red }
CSS is very much about context though. It isn't very good when dealing with hypotheticals that have little resemblance to the real code.
Depends on what you want to do. If you want all the text nodes to be red and the parent element is #test, then you just need #test {color:red}. If you need to be more specific, and give a color only for a child, then you can use .child {color:blue}, but if you want to color a child of #test, then you will need to specify the ancestor descendant, in other words #test .child {color:green}
Edit
Example according my comment http://jsbin.com/udoya3
Instead of using id here, you should use id and class. An id should be unique : one id, one element. Class aren't unique. A class can have more than one element.
<style>
.tt,.t {color:red;}
</style>
<div class="tt">test1</div>
<div id="test">
<div class="tt">test2</div>
</div>
#test, #t, #tt { color:red; }
is perfectly valid code.
an #id takes precedence over any other styling (ie a class) which can have adverse effects, but may also be desired.
what are you actually trying to do? save a few characters when writing your css?