Is there a kind of condition statement in SASS or SCSS for following HTML elements?
<div class="header" id="1">
<div class="header" id="2">
I found this Solution:
Different Styles for same class name but different id
But this seems the traditional solution, what I image is syntax like this:
.header{
[if #1]{
}
[else if #2]{
}
}
If there do not exist such syntax, I wonder what is the concern of such implementation?
Thanks!
Selectors themselves are made up of conditional statements. Since the ID and class are on the same element, concatenate the selectors using & as per normal:
.header{
&#\1 {
}
&#\2 {
}
}
Even though it might seem strange to append an ID selector to a class selector, it's perfectly valid. ID selectors don't have to be at the beginning of a compound selector like type or universal selectors do. But if it still rubs you the wrong way, there is nothing wrong with just using the ID selectors alone without qualifying them with the class selector (unless those same IDs are used differently elsewhere, in which case you should really rethink your HTML structure).
Note also that you need to escape the digits with a backslash in order for the ID selectors to be recognized, as CSS identifiers cannot normally start with a digit.
Related
Not sure if this is possible or if I'm just not asking the right questions, but I'm looking to apply a global rule for a set of classes that have different suffixes.
ie.
.gallery {} would like these rules to apply also to .gallery-1, .gallery-2, gallery-3 {} etc... Without having to add those actual specific classes to my stylesheet each time a new gallery is made.
Does anyone know if this is possible?
with thanks.
You could use the attribute selectors. Possibilities include:
[class|='gallery'] - matches all elements whose class attribute is exactly gallery, or begins gallery-
[class^='gallery'] - matches all elements whose class attribute starts with gallery
Note that I'm not clear what happens if your element has more than one class, as class="some-class gallery-1"
You can use wildcards with attribute selectors to do just that. Something like this should work for your case:
[class*='gallery-'] {
do:something;
}
See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Note the "Summary" section in the link above, it describes the different behavior of the "wildcard" symbols.
A simple alternative would be to simply apply two classes to your html elements:
class="gallery gallery-1"
Here is a very similar question and answer Is there a CSS selector by class prefix?.
Use CSS Selectors
For your example, you'll need this:
[class^='gallery']
(get all elements with a class name beginning with gallery)
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.
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/
I want to apply a CSS rule to any element whose one of the classes matches specified prefix.
E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
Some sort of combination of:
div[class|=status] and div[class~=status-]
Is it doable under CSS 2.1? Is it doable under any CSS spec?
Note: I do know I can use jQuery to emulate that.
It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):
div[class^="status-"], div[class*=" status-"]
Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:
[class^="status-"] — starts with "status-"
[class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).
Naturally, this also works in jQuery, as demonstrated here.
The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.
If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.
CSS Attribute selectors will allow you to check attributes for a string. (in this case - a class-name)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(looks like it's actually at 'recommendation' status for 2.1 and 3)
Here's an outline of how I *think it works:
[ ] : is the container for complex selectors if you will...
class : 'class' is the attribute you are looking at in this case.
* : modifier(if any): in this case - "wildcard" indicates you're looking for ANY match.
test- : the value (assuming there is one) of the attribute - that contains the string "test-" (which could be anything)
So, for example:
[class*='test-'] {
color: red;
}
You could be more specific if you have good reason, with the element too
ul[class*='test-'] > li { ... }
I've tried to find edge cases, but I see no need to use a combination of ^ and * - as * gets everything...
example: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Everything above IE6 will happily obey. : )
note that:
[class] { ... }
Will select anything with a class...
This is not possible with CSS selectors. But you could use two classes instead of one, e.g. status and important instead of status-important.
You can't do this no. There is one attribute selector that matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.
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.