I have this html:
<div>
<input class="orderrow-1" type="text"></input>
<input class="orderrow-2" type="text"></input>
</div>
and this css:
input[class^='orderrow-']
{
border: 1px solid #e2e2e2;
color: #333;
font-size: 1em;
margin: 5px 5px 6px 0px;
padding: 5px;
width: 100px;
text-align: right;
}
I try to style all input fields with a class that begins with 'orderrow-' but above doesn't work. Any suggestions?
Edit: Sorry, above does work. The problem is that I have two casses. Like this:
<div>
<input class="trigger orderrow-1" type="text"></input>
<input class="trigger orderrow-2" type="text"></input>
</div>
The selector doesn't work when there is something before orderrow-1. Ideas?
The problem is that your using a prefix match ^= which means it will match the value of the class attribute (which includes ALL class names) which begin with orderrow- The actual value of the class attribute it 'trigger orderrow-2' if you want a wildcard selector the specification reccomends this: *= it looks for a value that contains the string at any point.
example:
input[class ^="orderrow-"], input[class *=" orderrow-"]
{
border: 1px solid #e2e2e2;
color: #333;
font-size: 1em;
margin: 5px 5px 6px 0px;
padding: 5px;
width: 100px;
text-align: right;
}
input.orderrow-1 {
border: 1px solid #F00;
}
it is important to note that because attributes selectors and clas selectors have the same specificity you should place the overribe below the attribute to ensure proper cascadence* of the styles (as per my example - jsfiddle).
EDIT: as per comments to use more precise selectors in the example.
docs see the docs for the three different wildcard selector.
*I sometimes make up words, but so long as you get my meaning...
it should be fine check out my code pen test of various css3 pseudo classes here http://codepen.io/jamiepaterson/pen/cADfs
The one you want is the purple text color on this test.
Related
I have two elements (<a> and <button>), both of which are sharing the same classes from Tachyons:
<a class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1 " href="/edit-profile/photos"
>Confirm account</a>
<button class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1 " type="submit">Next</button>
The expected behaviour is that they will both be the same width, and yet they're different (despite the same styles).
Any idea what's going on here?
Here's a Codepen demonstrating the issue.
In your particular case the button has a border and a different font, which is a default style for your browser. Each browser have it's own defaults for every type of elements, that's why a button and a link would look the way they do without any styling. In a matter of fact it isn't right to say "without any styling", it is rather "without any additional styling":
<button>I'm a button</button>
I'm a link
I didn't go through all the css you have, because you have 17 classes for a single element and I'm too lazy for it, but it actually possible to have different styles for different elements with a common class:
.awesome {
display: inline-block;
border: 5px solid;
width: 200px;
box-sizing: border-box;
padding: 20px;
text-align: center;
margin: 10px 0 10px 10px;
font-family: Arial, serif;
}
div.awesome {
background-color: deepskyblue;
border-color: royalblue;
font-style: italic;
color: darkslateblue;
}
span.awesome {
background-color: orangered;
border-color: firebrick;
font-weight: bold;
color: gold;
}
<div class="awesome">I'm a div</div>
<span class="awesome">I'm a span</span>
I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?
Simple example(for request):
<div><span>For Decoration</span></div>
div{
width:0; height:0;
border-bottom:116px solid #009;
border-left:500px solid #900;
margin:0 auto;
}
div span{
display:block;
position:absolute;
margin:0 auto;
left:0;
right:0;
width:150px;
color:#fff;
}
There are two solutions to this:
1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.
2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.
-------------------
Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".
The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.
.end {
display: inline-block;
width: 5%;
height: 20px;
border: 5px solid transparent;
}
.end-left {
border-left-color: #999;
border-top-color: #999;
}
.end-right {
border-right-color: #999;
border-top-color: #999;
}
.languages {
display: inline-block;
width: 80%;
text-align: center;
font-family: 'copperplate', 'century gothic';
color: #999;
}
.languages span {
display: inline-block;
width: 15%;
}
<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
<span class="english">Hello</span>
<span class="french">Bonjour</span>
<span class="italian">Ciao</span>
<span class="spanish">Hola</span>
<span class="hinid">Namaste</span>
<span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>
I have an asp button with certain style. but when i apply the same style to asp file upload control, only background change to that style. The browse button is still the same.
Asp code is
<div>
Please Select Excel File:
<asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
</div>
CSS is
.addkey_btn {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
I want to apply the same css to Browse button as in Upload button. Any suggestions?
EDIT1
Any pure CSS way of doing this?
It is very difficult to style input[type=file] reliably across browsers. The only cross-browser solution is the one demonstrated by #Vitorino, using label and/or pseudo-elements to hide the actual input and then style that element/pseudo-element instead.
This answer doesn't repeat that, but offers a pure CSS alternative which is browser dependent. That said, this should not be used in production websites, this is just a proof-of-concept or a demo.
Modern browsers are implementing somewhat non-standard extensions to enable user-styling of hitherto nigh-impossible element features. This allows developers to override default user-agent stylesheet to a large extent.
Custom-extensions:
Specifically, for input[type=file] at least Trident (for IE-10 and above) and Webkit (for Chrome, Safari) allow styling of this element to some extent without resorting to hacks like hidden elements, or absolutely positioned pseudo-elements. For this case, the vendor-specific extensions of our interest are:
-webkit-appearance (to enable override of user-agent style in Webkit-based browsers)
::-webkit-file-upload-button (to enable styling of the browse button in Webkit browsers)
::-ms-browse (to enable styling of the browse button in Trident-based browsers, i.e. IE)
::-ms-value (to enable styling of text input in Trident browsers, i.e. IE)
Caveats:
Unfortunately, there are no -moz- extensions for this in Gecko/Mozilla based browsers. Specifically, at least Firefox doesn't allow styling of the browse button at all.
IE does not allow changing the position of the browse button from right to left. Has to be further verified, perhaps it is using -ms-flex to control that?
Demo:
Example Fiddle: http://jsfiddle.net/abhitalks/hxv19bbg/7/
Example Snippet:
The following snippet will work perfectly in IE-10/11 and Chrome-39 (that is what I tested against), but will not work with Firefox.
* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
display: inline-block;
background-color: #eee;
border: 1px solid gray;
font-size: 15px; padding: 4px;
}
input[type=file] + input {
padding: 13px;
background-color: #00b7cd;
}
::-webkit-file-upload-button {
-webkit-appearance: none;
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
::-ms-browse {
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none; }
<div>
<label>Select File: </label>
<input id="browse" type="file" />
<input class="btn" type="button" value="Submit" />
</div>
you can style label and place it on top of choose file button
.btn,
label.choose:before {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
label.choose:before {
content: 'Choose file';
padding: 3px 6px;
position: absolute;
}
<div>
<label class="choose">
<input id="browse" type="file" />
</label>
<input class="btn" type="button" value="Submit" />
</div>
I'm trying to build a HTML/CSS periodic table. I have this as my HTML code:
<div id="Hydrogen">
<p>1</p>
H
Hydrogen
1.00794
</div>
and this is my CSS code:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
#hydrogen {
background: #fff;
margin: 0 auto;
width: 50px;
padding: 30px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
position: absolute;
}
How do I target the <p>1</p> tag in my #hydrogen ID? Basically, I want to display a 1 on the top-left corner of the div cell. Also, is this the best method of doing this, or is there a easier way?
If it’s the only p element within that div, then sinply
#Hydrogen p { … }
Otherwise, if it’s the first one,
#Hydrogen p:first-child { … }
This are absolute CSS selector basics – so you should perhaps read some tutorials on that matter.
Something along the lines of
#hydrogen p { position:absolute; left:0; top:0;}
should get you started.
You can also use the command "span".
Example:
<p><span>1</span></p>
CSS:
span { font-size:14; }
You can expend this code with "id" or "class".
ID-Example:
<p><span id="name">1</span></p>
CSS:
#name { font-size:14; }
Class-Example:
<p><span class="large">1</span></p>
CSS:
.large { font-size:14; }
There is nothing wrong with:
#hydrogen p{..}
but as you said you want to do periodic table so you will have 103 elements so than for every p-element you will have to write:
#hydrogen p{..}
#helium p{...}
#lithium p{...}
... and so 103 times, same thing with divs with Id's
Better solution would be to give p and div class name
.atomic-number{...}
.grid-cell{...}
<div class="grid-cell">
<p class="atomic-number">1</p>
H
Hydrogen
1.00794
</div>
You can style all elements with just two lines of CSS
EDIT
Create rows, and position elements inside them.
For example float all grid cells left, if you need something to stick on the right side add class="right" (1st row) you probably will have to change colours same way, also you can create invisible cells and fill space with them (2nd row)
http://fiddle.jshell.net/tH7Pq/1/
If you want you can read more about classes, id's and selectors here:
Id's and classes
multiple classes
child-and-sibling
Reading CSS documentation I'm trying to create a selector for a class preceded by another class:
<div class="AAAAA">
<div class="CCCC"></div>
</div>
<div class="AAAAA">
<div class="BBBB"></div>
<div class="CCCC"></div>
</div>
I need to create a selector for .CCCC preceded by .BBBB, here my code:
.CCCC {
width: 100px;
height: 20px;
border: 1px solid #000;
}
.CCCC~.BBBB {
width: 10px;
border: 1px solid #000;
}
So in my example the first div with CCCC class whould have a width of 100px, the second div with CCCC that id preceded by the div with class BBBB should have a width of 10px.
Any idea why this is not working?
You need to reverse your order. Note, this will select all .CCCC that are siblings following .BBBB.
.BBBB ~ .CCCC {
width: 10px;
border: 1px solid #000;
}
If you only want the next one, which must immediately follow it, then this:
.BBBB + .CCCC {
width: 10px;
border: 1px solid #000;
}
It is helpful to remember that with the current capabilities of CSS, the very last item in your selector string is always going to be the item you are actually selecting and applying the properties to (if a parent selector ever comes about, then that may not be so). So your incorrect .CCCC ~ .BBBB should have flagged you as incorrect because the .BBBB is the last item, but you were wanting to change the .CCCC.