Im working on a html linter using css.
Reference: https://bitsofco.de/linting-html-using-css/
I like the idea of highlighting elements that have inline styles like so:
*[style] {
color: red !important;
border: 5px solid red !important;
}
However, I do have certain instances where I have to use inline styles, ie canvas elements.
How do I use the :not selector with the *?
Can I have multiple :nots, ie :not(canvas):not(form), etc
What you have works and excludes the canvas. And yes, you can chain multiple :not()s like that.
* {
border: 1px solid black;
}
*[style]:not(canvas):not(form) {
color: red !important;
border: 5px solid red !important;
}
<canvas style="foo">canvas</canvas>
<form style="foo">form</form>
<div style="foo">div</div>
the :not() rule matches anything not matching the subrule. The subrule is a valid css selector. writing [canvas] will match any element with a canvas attribute, so this isn't what you want.
The correct usage is:
*[style]:not(canvas):not(form)
Related
Here is my HTML structure:
p {
margin: 0;
border: 1px solid;
}
small {
display: block;
margin-top: 40px;
border: 1px solid #999;
}
small + span {
display: block;
border: 1px solid #ccc;
}
<p>content</p>
<small>tags</small>
<span>edit</span>
All fine. Sometimes <small> element is empty. Something like this:
<p>content</p>
<small></small>
<span></span>
In this case, I want to remove the margin-top of <small>.
Is that possible using pure CSS? It should be noted I don't want to use JS.
You could try using a combination of :not and :empty pseudo-classes.
small:not(:empty) {
margin-top: 40px;
}
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector. -MDN
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not. -MDN
Here is my HTML:
<input type='submit' class='clsname'>
This CSS makes a blue border for that input: Demo
input{
border: 1px solid red;
}
.clsname{
border: 1px solid blue;
}
But this makes a red border for that input: Demo
input[type='submit']{
border: 1px solid red;
}
.clsname{
border: 1px solid blue;
}
I don't know why exactly, But I know it is related to the priority of selectors. I think input[type='submit'] has a bigger priority than classname, but input doesn't have a bigger priority than classname.
Now I have a selector like this: input[type='submit'] and I need to give a bigger priority to class name. How can I do that? I mean something like this:
input[type='submit'] { }
.clsname { /* bigger priority here */ }
Note: I can do that by !important, But I want to know is there any approach else? Because using !important is not recommended.
It's specificity. Read more here on W3.
Use input[type='submit'].clsname, .clsname selector.
Here's the fiddle.
You can overqualify your selector intentionaly to give it higher priority.
input[type="submit"].clsname
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}
Is it possible to remove the dotted line surrounding a selected item in a select element?
I have tried to add the outline property in CSS but it did not work, at least not in FF.
<style>
select { outline:none; }
</style>
Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/
Well, Duopixel’s answer is plain perfect. If we go a step further we can make it bulletproof.
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Only valid for Firefox and the ugly dotted outline around the selected option is gone.
I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow but supports rgba (IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).
Firefox uses the text color to determine the color of the dotted border. So say if you do...
select {
color: rgba(0,0,0,0);
}
Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow comes to the rescue:
select {
color: rgba(0,0,0,0);
text-shadow: 0 0 0 #000;
}
We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:
select {
color: #000;
color: rgba(0,0,0,0);
text-shadow: 0 0 0 #000;
}
This is when IE9 comes into play: it supports rgba but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow detection and do...
.no-textshadow select {
color: #000;
}
Enjoy.
Here is a collaboration of solutions to fix styling issues with Firefox select boxes. Use this CSS selector as part of your usual CSS reset.
Class removes outline as per question but also removes any background image (as I usually use a custom dropdown arrow and Firefoxes system dropdown arrow can't currently be removed). If using background image for anything other than dropdown image, simply remove line background-image: none !important;
#-moz-document url-prefix() {
select, select:-moz-focusring, select::-moz-focus-inner {
color: transparent !important;
text-shadow: 0 0 0 #000 !important;
background-image: none !important;
border:0;
}
}
This will target all firefox versions
#-moz-document url-prefix() {
select {
color: transparent !important;
text-shadow: 0 0 0 #000 !important;
}
}
You might want to remove the !important, if you plan to have the outline appear on other pages across your site that use the same stylesheet.
In general, form controls are impossible to style to that degree of accuracy. There's no browser I'm aware of that supports a sensible range of properties in all controls. That's the reason why there're a gazillion JavaScript libraries that "fake" form controls with images and other HTML elements and emulate their original functionality with code:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...
<select onchange="this.blur();">
If you use this the border stays until you select an item from the list.
Try one of these:
a:active {
outline: none;
-moz-outline: none;
}
a {
-moz-user-focus: none;
}
Reference
Here comes the solution
:focus {outline:none;}
::-moz-focus-inner {border:0;}
Remove outline/dotted border from Firefox All Selectable Tags.
Put this line of code in your style sheet:
*:focus{outline:none !important;}
Step 1) Add HTML:
Add the select options of your choice and add the attribute: contenteditable="true"
Step 2) Add CSS:
Use the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property:
[contenteditable] {
outline: 0px solid transparent;
}
select {
border: none;
}
<select contenteditable="true">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
select:focus {
box-shadow: none;
}
To remove the outline of the select box when selected/focused.
https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized check this out
Download the plugin from here
Add border-style: none to your select in CSS.
select {
border-style: none; }
input[type='range']::-moz-focus-outer {
border: 0;
outline: none !important;
}
working 100%
This will remove focus from the select element and the outline:
$("select").click(function(){
$(this).blur();
});
Though this isn't without its shortcomings on other browsers. You'll want to check the browser the user is using:
if (FIREFOX) {
//implement the code
}