I've the following issue: there is <select> option in my website, and it have 3 different logic data in one <option> which needs to be separated like this:
I was thinking about word-spacing, but as you can see there is some spaces in last data, so it will not work. :after and :before will be not good either. And as I know there is no way to insert <div> or <span> inside <option>. I was wondering is there any other ways to implement this, because currently I have only bad solution with .
If you want to present option elements in a tabular manner, as it seems, then the clumsy way of using no-break spaces and a monospace font seems to be the only way.
Consider using a different approach, such as a set of radio buttons with associated labels and other texts. Then you can use a table element.
I did a few changes to a library called Chosen ... I think it's just what you need.
DEMO
This is the usage in JS:
$('.chosen-select').chosen({
width: '250px',
html: function(option){
return $(option).data('html');
}
});
Related
I have two elements, author and citaion of inside a div like follow:
<div>
<h1>author</h1>
<h1>citation</h1>
</div>
If both author and citation exist, I put a comma between author and citation. If only one of them exists or none of them exists, I do not do anything.
Is there a way to do it in CSS or Sass only without JavaScript?
In CSS, you cannot manipulate an earlier sibling by checking the next one. The only way you can check if the second element is there and do something about it is selecting it.
You can solve it using pseudo-element :before. However, it may not be the way you want it because the two elements are on different lines (both <h1>).
So, if you want to make it without JavaScript, I would recommend to consider put both elements in the same line.
h1 span:nth-of-type(2):before {
content: ', ';
}
<h1>
<span>author</span><span>citation</span>
</h1>
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.
I am using unobtrusive validation in an ASP.Net MVC3 app. I would like to style the label elements associated with required elements in a certain way.
My concern is not to tweak the visual indicators around the required field itself, but to modify the appearance of a different element based on the attributes of this element.
Now, I believe it would be possible to style the elements themselves just with CSS by using a CSS rule whose selector applied to all elements with the [data-val-required] attribute. It would look something like this:
input[data-val-required] { color: red; }
But is it possible to style the labels? To say (with a CSS selector) that a CSS rule applies to all label elements whose for attribute points to an input element that has the [data-val-required] attribute?
I'm currently applying styling with a little bit of jQuery currently, and it works nicely. But it would be even nicer if I could just set up a CSS rule and be done with it.
You can't get there from here. As #vlgalik says, the only CSS options are selectors that are 1) not supported on some browsers, and 2) have limited ability to find other elements, forcing you to construct your markup to comply.
So, your current solution -- use JQuery to find the labels and their corresponding inputs -- is your best bet.
However, I'd approach your jQuery solution in the opposite direction: first find all the inputs matching input[data-val-required], and for each of those, get its ID, then select the corresponding label: label[for="<id-from-input>"] -- that seems like it will be less work. But that's an optimization; if you don't have a lot of labels and inputs on the page, either direction will work fine.
This jsfiddle example is using CSS3 selectors, but there is a downside that the label must follow after input element in the HTML (can be placed before using addition CSS like in example).
Much simpler and effective would be to give the label element class attribute like:
<label class="required">
or to place the label input pair in div element:
<div class="required">
<label for="input1">Label 1</label>
<input id="input1" ... />
</div>
and apply desired CSS styling by simply using:
.required label {
...
}
The example you gave should be very close to what you would need to do. Try using this:
input[for=data-val-required]{}
This selector is based off of the attributes of a given tag. That should give you what you are looking for.
This is impossible, disregard this question. Thanks for all the help.
Is there any way to select the text for something like this, and for the example we'll say I want to select the text duck:
<div id="derp">
<a class="irrelevant">duck cat woof</a>
</div>
Any help appreciated.
Edit: Apparently it felt like adding a jquery tag. Just css, sorry.
Edit again:
Short answer: not with css. What are you trying to do anyway? Add some context please. – Till 1 min ago
On reddit you have an ability to change the css of your 'subreddit'. But you can't alter any of the other code, only the stylesheet. So I basically want to be able to select a word of text that is unattributed within a div and be able to use content with a pseudoselector to add an image / text before or after some text matching 'xxx'.
Without using the ID or class, you could select it with $('div a').text(). This will give you the text of the first a in the first div.
Without any attributes there will be no way to specify a specific element.
You can try something like:
$('#derp').children('a').val();
This depends on the surrounding HTML. Is the a element the only child of #derp?
#derp > a /* a being the only a child */
#derp > a:first-of-type /* a being the first child */
You might also be able to use the attribute selectors:
#derp > *[attr="val"]
Check out the W3Cs Selectors Level 3 document for all available CSS3 selectors.
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.