I have the following test code in my style.css (to turn borders on for all elements):
* {
border: 1px solid blue; /*testing*/
}
Currently, I am just changing 1px to 0px when I use this test feature.
* {
border: 0px solid blue; /*testing*/
}
But I found that buttons with borders, even border=0, do not take on default button style. So, I would like to exclude the button element from my test code.
Something like this:
*:not([button]) {
border: 1px solid blue;
}
But the above doesn't work.
Is there a simple way to exclude when applying a 1px border to all elements?
The correct syntax:
*:not(button) {
// ....
}
Square brackets are for attributes, as inside :not() you should have a selector.
Related
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.
I am trying to achieve the following effect using CSS
I tried using a table and an empty column at second place to achive double-line effect and then I used left and right borders.But I am getting breaks shown below
I used border-collapse:collapse but it then removes that empty column making the trick fail.So what can I do or any other hack that you can suggest.
EDIT: Here is the code
<table>
<tr><td>Name</td><td class="target"></td><td class="target1">Age</td><td>School</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
</table>
The css
table td
{
padding: 14px;
padding-left: 3px;
font-size: 20px;
border-bottom: 1px solid #F4C8C8;
}
.target
{
border-right: 1px solid #F4C8C8;
}
.target1
{
border-left: 1px solid #F4C8C8;
}
table tr td
{
}
table
{
/*border-collapse: collapse;*/
}
Why not just use the border-style double?
just add a class "first" to your first column and add this style to it:
.first{
border-right-style:double;
}
http://jsfiddle.net/KEw9W/
EDIT: here's a fiddle with your code: http://jsfiddle.net/hC78S/3/
I've removed the empty cells and added this to your "target" code:
.target1
{
border-left: 4px double #F4C8C8;
}
As you can see, you need to enlarge the border in order to be able to see the double line. (because 1 pixel won't be able to show 2 lines obviously)
In below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
I need to get rid outer border, just cells border and there should be space between cells . I can't get why it builds this outer border around the table, I just tried this code in separate file
table {
border-collapse: separate;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
}
and it display correctly. But on website content it make this outer border. Can somebody help me?
Just do in your css:
.tribe-events-calendar
{
border: 0px!important;
}
OR
#big
{
border: 0px!important;
}
Or, if it's already there the class or id, modify these values to set them as said. Beware the class, because supposedly it should affect other elements.
Reading again your question, if you set it in a different stylesheet it could happen that it overwrites the values of the 0px with the values of the Npx from the other sheet. Merge them into one, or, if you cannot, put the !important; mark after the css that says 0px.
If nothing works, embed (not include) it at the beginning of your file. Last and least (read: NOT ADVISABLE), use inline css.
I tried to add this: "border: none;" to the table element itself inside the HTML and it worked.
I think your problem is this:
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBB;
}
It overrides your css.
Use chrome's "inspect element" or firebug for Firefox to see the problem.
You Just need to change only one place that is,
Original Code
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBBBBB;
After Modification
table.tribe-events-calendar td {
border: 1px solid #BBBBBB;
You can use Firefox FireBug for inspect and do Live edits for CSS and Jquery.
I have a div with an id of 'gallery' and I want to style the images inside it. Specifically, I want to give each of the images a 1px solid yellow border except on the bottom because they sit on top of each other, so I don't want to double the border on the bottom.
What I'm confused about is how to choose between the different border style elements: border, border-style, border-width. I tried this:
div#gallery img
{
border-width:1px;
border-style:solid;
border: solid yellow;
border: 1px 1px 0px 1px;
}
I managed to get a yellow border with this css above but the border seems more like a 2px border - it's quite thick - and, besides that, the syntax I'm using doesn't look very elegant.
Any recommendations on how to do this more concisely/elegantly?
I think this is the best way:
border: 1px solid yellow;
border-bottom: none;
The syntax for the border declaration goes width style color and affects all four borders. After that, you can override the bottom back to using no border by declaring border-bottom as none.
I don't really know if there's a wrong way to do it, but you basically have 3 methods to do it:
Method 1
border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
Method 2
border: 1px solid yellow;
border-bottom: 0;
Method 2
border: 1px solid yellow;
border-bottom: none;
I would prefer either method 2 or method 3.
(I know method 2 and method 3 are basically the same, but I wanted to give both solutions, so you can choose what you like, "none" or "0").