If I had a css selector such as #subtab-1, #subtab-2 etc
I could make the wildcard selector as suchdiv[id^='subtab-']
But I cannot figure out how to make a wild card for selectors such as
#subtab-1-sub1
#subtab-1-sub2
#subtab-1-sub2
#subtab-2-sub1
#subtab2-sub2
#subtab2-sub-3
etc...
How can you make something like:
div[id^='subtab-*tab-*'] (*=wildcard)
If I am understanding your question correctly, you are trying to select all elements whose id starts with subtab- followed by a number, followed by -sub followed by another number. It also sounds like you want this selector to not match #subtab-1, only things that have a suffix like #subtab-1-sub1.
This cannot be done with CSS. CSS does not supply a selector that will allow wildcards. You can however hack something together that comes pretty close.
Hacky selector that might work
[id^="subtab-"][id*="-sub"] would match any id that starts with subtab- and also contains -sub somewhere in the id. This will probably work but could cause false positives on things like #subtab-1-subtle or #subtab-something-sub2, #subtab-sub, etc.
Another hacky selector that might work
Making the assumption that #subtab-?-sub? elements are always contained inside of #subtab-? elements and that #subtab-? elements can never contain another #subtab-? element, you could use the child combinator to target them: [id^="subtab-"] > [id^="subtab-"]
Relying on a class instead
A better solution would probably be to give all of the elements you are trying to target a common class, for instance <div class="subtab-sub">, then selecting them all would be as easy as .subtab-sub. Using a class would also yield much faster performance than using attribute selectors.
All the ids start with subtab so use
div[id^='subtab']
I'm not sure you want to use IDs constructed in this fashion as a way to address elements in your HTML. I'd experiment with using classes such as subsubtab, and you could try using the nth-child pseudo-class to individually address subtabs or subsubtabs:
<div class="tabs">
<div class="subtab">
<div class="subsubtab">...</div>
<div class="subsubtab">...</div>
...
</div>
<div class="subtab">
...
</div>
</div>
Then, your CSS would look like
div.subsubtab { color: brown; }
or
div.subtab:nth-child(2) { border: 1px solid red; }
Have a look into this jQuery Selector
I think it can work.
Related
This should be simple, but I'm having trouble finding the search terms for it.
Let's say I have this:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
In CSS, how can I create a selector that matches something that matches "(.a or .b) and .c"?
I know I could do this:
.a.c,.b.c {
/* CSS stuff */
}
But, assuming I'm going to have to do this sort of logic a lot, with a variety of logical combinations, is there a better syntax?
is there a better syntax?
No. CSS' or operator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.
Not yet, but there is the experimental :is() (formerly :matches()) pseudo-class selector that does just that:
:is(.a .b) .c {
/* style properties go here */
}
You can find more info on it here and here. Currently, most browsers support its initial version :any(), which works the same way, but will be replaced by :is(). We just have to wait a little more before using this everywhere (I surely will).
For those reading this >= 2021:
I found success using the :is() selector:
*:is(.a, .b).c{...}
If you have this:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
And you only want to select the elements which have .x and (.a or .b), you could write:
.x:not(.c) { ... }
but that's convenient only when you have three "sub-classes" and you want to select two of them.
Selecting only one sub-class (for instance .a): .a.x
Selecting two sub-classes (for instance .a and .b): .x:not(.c)
Selecting all three sub-classes: .x
No. Standard CSS does not provide the kind of thing you're looking for.
However, you might want to look into LESS and SASS.
These are two projects which aim to extend default CSS syntax by introducing additional features, including variables, nested rules, and other enhancements.
They allow you to write much more structured CSS code, and either of them will almost certainly solve your particular use case.
Of course, none of the browsers support their extended syntax (especially since the two projects each have different syntax and features), but what they do is provide a "compiler" which converts your LESS or SASS code into standard CSS, which you can then deploy on your site.
So, due to two sets of messy procedural code colliding in horrible Lovecraftian horror that I can't do much about, I am forced to deal with a situation where I'm going to have two seperate CSS class declarations on the same objects. For example, I might have an end result that looks like...
<div class="my_class" class="cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>
I know having multiple declarations like this is bad, but there's not anything I can really do about it at present. However, I can control the content of one of those classes, and potentially the order they appear in...
Given this, what effects will the order have on the classes showing/not-showing? Will one overwrite the the other? Will it error out and I'm effectively left with no class? Will they combine as if both were in the same declaration? Or with it simply destroy Dunwich and everything I hold dear?
Edit: Looking into it deeper, it looks like the div will completely refuse to display, but I"m trying to find some way around that if possible.
The two class attributes on the same element will break. The second class will be ignored, see below.
The only alternative is to add an inline style unless you can clean up the code in the first instance.
.my_class {
color: blue;
}
.alt_class {
color: red;
}
<div class="my_class" class="alt_class">
...something goes here, or so I have been told...
</div>
Using duplicate attribute class for one element is invalid in HTML.
This is valid when you need to use multiple classes:
<div class="firstClass secondClass"></div>
The order does not matter, the classes will be targeted equally from HTML but depends on CSS order.
For example:
.secondClass{background: salmon}
.firstClass{background: skyblue}
firstClass will override secondClass because it's set after secondClass
Why don't you use just like this:
<div class="my_class second_class third_class">
...something goes here, or so I have been told...
</div>
Isn't this working for you?! or you're trying to achieve something else?!
Why don't you just use
<style>
.parent_class{
margin:10px;
}
.parent_class.child_class{
margin:20px;
background:red;
}
</style>
<div class="parent_class child_class">
...something goes here, or so I have been told...
</div>
first of all, you need to put all the classes in one 'class' attribute separated by a single space, otherwise the browser will only take the first one, aka:
<div class="my_class cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>
To answer your second question, whichever one comes later in the stylesheet, will overwrite any rule that also exists with the first class, aka:
.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
color: blue;
}
The color would be blue. If they were ordered the other way around, the color would be red. If any of the rules contains '!important' it would take precedence.
Also, if there are different rules within the classes, they won't conflict and will all apply, aka:
.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
font-size: 36px;
}
The color would be red and the font-size would be 36px.
It is actually common and not problematic to declare more than one class for a single object; as jQuery is often used to add/remove classes based on different events.
I am facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
I have a div with an ID:
<div id="main">
What's the correct (or difference) between
div#main {
and
#main {
Regards,
There is a great doco on using efficient CSS selectors, focus on rules with overly qualified selectors:
ID selectors are unique by definition. Including tag or class
qualifiers just adds redundant information that needs to be evaluated
needlessly.
Instead of just applying the style to an element with id main, your selector will re-qualify the element by checking whether or not it's also a div (in that order). To clarify: css selectors are evaluated right to left, unlike same selector syntax when used in jQuery etc.
Re pixelistik's suggestion that div#main is more specific than #main - yes, that is technically correct, however if you have to resort to this to raise a rule's specificity, chances are the structure of CSS you're working on is not as thought through as it should be.
#main matches everything with ID 'main', whereas div#main matches only <div> elements with ID main.
Ideally, you should never have two elements with the same ID, so realistically the two don't make a difference, but there's probably performance related issues regarding whether specifying div makes it find the result faster.
So difference is that:
When you write div#main style will be only for <div> element.
When you write #main it can be used as style for <div>, <span>, <p>, etc.
And what recommend is hard to say, every developer it has it different. So i using for example
span.<nameClass> when is nested in <li> for example.
#nav li span.href a {
...
}
I think it's used when you want that someone class with specific name can have only one element.
So when your write span#href it will works only for <span id="href">Simply dummy text</span> not for others. When you write #href it will works for <span id="href">Simply dummy text</span> or Link but both are correct when you also asking about this. Differences i wrote above.
Both are correct.
div#main is more specific than #main, which means that styles defined with the first selector will override the ones of the second.
Here's a good introduction to CSS specifity:
http://htmldog.com/guides/cssadvanced/specificity/
in some CSS code I found out this type of selector
div#someid
Is this formally correct?
If the answer to (1) is YES, what's the need for the div selector before the #someid, shouldn't the id be unique in a valid web page?
Thanks!
Yes it's correct.
It might be because it makes the selector more specific. The more specific a selector it is the higher priority it is.
It is fine.
The stylesheet might be reused between pages which have the id on different elements
The explicit type provides information for the maintainer about the element
It makes the selector more specific, e.g. to override #other div.
The answer is they are the same but using the div in front of #id is superfluous and removing it does no harm while leaving it in only takes up space. Some may feel it makes the markup more readable, however, since it identifies the type of element the id is associated with.
I did read, once, that placing the div in front of the id may cause the browser to search through all divs first while just using #id does not but I'd have to look up that reference.
From what I understand, CSS will rank selectors based on how specific the selector is, if two rules apply to the same element,
ie
#someId{
color: black;
}
.someClass{
color: green;
}
And you had this div:
<div id="someId" class="someClass">
Then which wins? (There are rules in place to govern this particular example, I believe the ID would win anyway).
But say you had these rules:
.someClass{
color: black;
}
div.someOtherClass{
color: green;
}
Then I the second rule would trump it, because it's more specific.
However as David pointed out, ID's are generally rated a lot higher, so ID will win a lot of the time.
So there are two reasons I can see for using element#id selector
I) It's to trump some convoluted rule, ie div#canvas>div>div#main>div:last-child>div
II) So you know what element it is referring to, ie if your div had and id of "postcodeContainer" and you were trying to find it in the html file, it might be harder because you have to look at every element (unless you used your IDE's search/find option), where as div#postcodeContainer you know you are looking for a div element.
div#someid - select a div with id someid
#someid - select any type of element with id someid
One reason for having the tag selector is that it assumes some basic CSS, like it's a block tag with zero margins/padding.