<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?
Related
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>
My class names generate dynamically and I'm trying to apply styling to them using a kind of preg_match. Is something like this possible?
<style>
.*_class {
border: 1px solid red;
}
</style>
<div id="a_class">a</div>
<div id="b_class">b</div>
<div id="c_class">c</div>
You need to use attribute selectors for this.
[id$="_class"] {
}
The above says, anything with an id that ends with _class should be selected. For more information, see attribute selectors at MDN.
Perhaps reconsider how your classes are generated. While Praveen's answer will work and directly answers the question, attribute selectors can be inefficient. You might want to consider leveraging the fact you can have more than one class per element. E.g.
.class {color:#F00;}
.a.class {font-weight:bold; font-size:2em;}
<div class="a class">a</div>
<div class="b class">b</div>
<div class="c class">c</div>
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/
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.
is it possible to use a :not() selector with a :nth-of-type(1) selector?
i.e.
I want to select the first that doesn't have the title "something"
<html>
<head>
<style type="text/css">
p
{
color:#000000;
}
p:not([title=something]):nth-of-type(1)
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p title="something">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
The nth-of-type is acting on the original selector (p), it's not acting on the result of p:not([title=something]).
p:not([title=something]):nth-of-type(1)
This is saying, find the <p> without a title of "someting" that is also the 1st <p> on the page. This doesn't find any elements as the 1st <p> has the title "something".
What you want is the 1st <p> that doesn't contain the title "something". I don't know if CSS has a good way of doing that.
If you're willing to use jQuery, you can use do this:
$('p:not([title="something"]):eq(0)')
or:
$('p').not('[title="something"]').eq(0)
The problem is that the nth-of-type pseudo-class is defined as:
[nth-of-type] matches elements on the basis of their positions within a parent element’s list of child elements.
So the pseudo-class :nth-of-type(1) is limiting your selection to the p child at position 1.
Your pseudo-class not([title=something]) is limiting your selection to the p elements without the attribute/value title='something', just as you suspect.
The two selectors together are resulting in no elements because the p child at position 1 has title='something'.
For a better understanding, try the following:
p:nth-of-type(1) { color: red; }
p:not([title=something]) { text-decoration:underline; }
More information: Pseudo-classes, nth-of-type
As mentioned by the other answers, :nth-of-type() only refers to the element type, which in this case is p. The selector p:not([type=something]):nth-of-type(1) simply means a p element that is :not([type=something]) and is also the first p.
Anyway, what you're asking can be done in pure CSS using the general sibling selector, but may involve unnecessarily verbose and repetitive selectors:
p:not([title=something]) ~ p:not([title=something])
{
color:#000000;
}
p:not([title=something])
{
color:#ff0000;
}
If you just want to apply this to p elements without a title attribute, you can shorten your selectors a little:
p:not([title]) ~ p:not([title])
{
color:#000000;
}
p:not([title])
{
color:#ff0000;
}
I came up with this technique for use with classes first, which I describe in greater detail here, but it can be applied to a number of things, including attributes, for which I have another example here.