I know that to stack backgrounds on a selector I do something like
.selector{
background: url(url1), url(url2);
}
How can I add backgrounds when using different classes? (like a base class that will have url1, and another class which will have url2)
like
.base{
background: url(url1);
}
.selector{
background: url(url2);
}
but stacked
As far as I know, CSS is a set of key-value pairs. The key being the selector, the rule being the set of attributes associated to values inside the curly brackets. This forms a rule. If you stack keys, then you are basically telling that the attribute values are common for all tags which match the selector. However, if you want to give more values to the same attribute, it is ambivalent and I am pretty sure it is not supported in CSS.
EDIT: Imagine the interpreter having to look at each attribute of each rule and count the number of commas and check whether the number of commas matches the number of commas in the selector except value selectors. It would slow down the interpretation and would be nonsensical too.
Related
I'm trying to select an element which has two distinct classes, unfortunately these class names are partially randomised (The markup is out of my control) e.g.
<div class="thing1_abc thing2_def"></div>
Where the second part of the class name is random, as in, the abc and def parts will not be consistent between each page load.
The only thing I could think of was:
div[class^="thing1_"][class^="thing2_"]{ }
But it seems you can't use multiple class-attribute selectors in a single selector, is there any way to achieve this? Or any alternative that will select this element based on it's classes?
The ^= relates to the beginning of the whole class atribute string, that's why thing2_ won't be matched. You could use *= instead, like this:
div[class*="thing1_"][class*="thing2_"]{ }
But that would also match some_class_thing1_. That might still filt your needs, if you can be sure that such a class will never exist. But otherwise, I don't see a pure CSS solution.
I am used to using descendant space selectors and comma selectors. I have ids around larger sets of elements in order to manipulate them easier in jquery and css.
So I tried something like this:
#parent_id input, textarea
{
width: 100px;
}
So when I do this, my expectation is that this effect will occur on input AND textarea inside the #parent_id. Instead, this disqualifies parent_id and just selects all input, textarea. Why? And how can I avoid this, aside from making them separate.
In CSS, rules have the form:
selector0 [, selectorN ]*
{
property0: value0[,
property1: value1]*
}
So the comma , is used to separate different selectors for the same property set. For example, if you wanted two radically different selectors for the same property set.
Selectors in CSS must be fully-qualified, there is no contextual-sensitivity - this is partly because CSS is designed to be forward-compatible: browsers are instructed to try each and every selector in a rule independently, so browsers gracefully-degrade when they encounter new selector syntax they don't support.
To get the effect you want just type more :)
#parent_id input,
#parent_id textarea {
width: 100px;
}
Note that there is a proposed/experimental :matches() selector function which works as a logical OR operator in selectors, it's in the CSS Level 4 Selectors specification (currently in a working-draft state, as of 2016-05-04: https://drafts.csswg.org/selectors-4/ ).
The matches-any pseudo-class, :matches(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.
So in your case it would be:
#parent_id :matches( input, textarea ) {
width: 100px;
}
But I don't think this usage is really that better, it's less obvious and requires greater knowledge of CSS.
Im trying to target a number of specific disabled textboxes to alter the color of the text. the format of the ID is:
id="jc-cr-lmid-Total-1-RangeFr"
Where the number changes from 1-5 depending on the amount of textboxes on the screen.
Is there any way to insert a wildcard for the number while keeping the -RangeFr section of the selector?
I have tried:
id*=["jc-cr-lmid-Total-*-RangeFr"]:disabled{
//Change text color
}
But this hasn't worked
Yes, sort of; you can use attribute-starts-with and attribute-ends-with notation:
[id^="jc-cr-lmid-Total-"][id$="-RangeFr"]:disabled{
//Change text color
}
Note, though, that this allows any sequence of characters between the required start and end, as CSS has no concept of regular expression, so it'll match:
id="jc-cr-lmid-Total-1-RangeFr"
id="jc-cr-lmid-Total-1000-RangeFr"
id="jc-cr-lmid-Total-anyOtherSequenceOfCharacters-RangeFr"
In all honesty, you'd be better off simply using a class for this, which would be far more simple and reliable.
References:
CSS attribute selectors.
Here is my original CSS to apply different colour backgrounds:
.one-colour {
background-color:#153a63;
}
.two-colour {
background-color:#f16c24;
}
.three-colour {
background-color:#337db9;
}
I know you can do multiple CSS classes such as .one.two.three {...}
But is my CSS condensed down as much as possible? and I don't mean just putting the code onto one line to make it "shorter".
But is my CSS condensed down as much as possible?
Yes(ish)
Each CSS rule is setting the same property style to a different value. As such, you have condensed the ruleset to the minimum number of rules to allow this level of distinction. If anything, you could simply change background-color to just background- if background properties aren't set in other rules which this could override.
*Although my predisposition is that this should be a comment, I guess in essence it is effectively an answer to your question.
Additional Methods Update:
As mentioned in the comments, there are some other (overkill?) methods for condensing:
Put everything in a single line, remove whitespace (minify)
Shorten your class names, e.g (.one-colour -> .c1), as noted below this is a subjective, context sensitive decision
The last style setting in a CSS rule does not require a trailing semi-colon in order for the rule to process, so you can also remove these
Convert your HEX colors to their 3 digit counterparts (approx), #036, #F63 and #36C
Depending on how you use these classes, there might be a way to remove one of those classes.
If you use those classes in a particular container - you could apply one of the colors to the container and then override it only on 2 of the inner divs.
Again, it depends on how you use the classes.
Yes, I would say so. If you wanted to start doing things to all the classes at once (like add a black border to them all) then you could combine that onto one line, as you suggested. Otherwise, it looks as compact as it's going to get at the moment. I can't suggest an improvement.
I know we can provide styling and positioning in CSS for text box, text area, buttons etc. using "Class" , "Id" etc. attributes to identifying an element.
My question is:
How do we decide when to use a particular attribute?
Is there any advantage of using one over other (class vs Id vs other)?
Why do we have multiple ways of identifying elements? Why not have one standard way to identifying such as, lets say "Id"?
Thanks in advance
ID is used when we want a more specific selector than a class. A class can be applied to many elements, an ID only to one (a unique one at that). ID's are most specific and will (depending on your selector) gain precedence over a class. I would recommend reading up on CSS precedence: https://www.google.ca/?q=css%20precedence
You can't use ID everywhere because only one element is allowed to have a given ID, so if you want to apply the same style to five different elements, you'd have to create five different rules, which is pointless.
It's usually best to use a baseline definition for how you want certain element types to appear generally (links, lists, tables, etc.). Then if you have specific places where you want those elements to have different styles, apply a class to an element to identify that place ("navigation-bar", e.g.), and use custom styles to modify the behavior of elements within that area:
li {/* How you generally want list items to appear */}
.navigation-bar li {/* How you want list items to appear in the nav bar */}
Due to the way the styles "cascade", properties set by the second rule will override the properties set by the first because the second selector is more specific.
As far as why there are multiple ways available to select an element, it's because they're pretty much all useful at one point or another. CSS helps reduce maintenance costs because you don't have to repeat the same styling information in a bunch of different places. It can only do this if you can come up with a rule that makes it possible to match the elements you want in a variety of different situations.
The reason why we need various selectors (and not just one, using ID like you suggest) is that they are useful in different scenarios.
Element-selector (input, div, span). Useful when we want to apply some sort of styling for all elements of a certain type, indepently of its classes or id.
Id-selector. Useful when you want to apply styling to a single specific element.
Class-selector. Useful when you want to apply styling to multiple elements, indepently of what type of element they are (div, span, input). With class you can also combine styling of various classes by adding several classes to the same element.
If you were to use only the ID-selector, then you would violate DRY, since you would have to repeat a lot of CSS. Let's say you have five input-elements, that all should have the same styling applied to them. You would then have to explicitly write the ID-selector for every element:
#input1, #input2, #input3
{
/* Some styling */
}
If you later on need to add another input, you would have to modify your CSS and add a new selector for that input, so that the styling is applied to that element as well. In this case it would be better to either use a class that can be applied to all inputs. Or use the element selector and just apply the styling to all inputs.
/* Either of these would probably be more suitable */
.inputs {
/* Use a class to style the inputs */
}
input {
/* Apply styling to all elements of type input */
}
Think of an element's id like its passport number - it is UNIQUE to the one element, and can be used to apply styling to it only.
Each element can have only one ID (e.g. <div id="id"></div>)
Each page can have only one element with that ID
Think of an element's class like its nationality - it may be SHARED with lots of other elements. Therefore it is NOT UNIQUE.
You can use the same class on multiple elements. (e.g. <div class="class"></div> <div class="class"></div>)
You can use multiple classes on the same element. (e.g. <div class="classone classtwo"></div>)
When doing large projects, you may want one standard content wrapper, with different things inside it each time. In this case, the wrapper would be identified by 'class' and the things inside it by 'id'.
When applying multiple instances of CSS, the order of precedence is as follows:
Element -> applying generic CSS, for example to all 'divs'
Class -> applying generic CSS, to all elements of that class
Id -> applying specific CSS, to one element
Inline styling -> applying specific CSS, using the style="" tag within an element's tags