I want to remove the borders of the last row so it just seems like a gap. Any suggestions? Thank you!
Remove the border of the last row's cells
tr:last-of-type td {
border: none;
}
If you want it to look like a gap, use pseudo-selectors
table tr:last-child td{
border: none;
}
You can use the nth element of a particular type using the nth-of-type pseudo-selector.
<style>
tr:nth-of-type(n){
border: 0px;
}
</style>
Although it is not advisable to use a style tag in your HTML. You can always use a separate CSS file.
Alternatively, for the first and the last element, first-of-type and last-of-type can also be used.
Related
Here is my jsfiddle link: http://jsfiddle.net/93rvcobj/
I have created web page using <table>, i need to remove border-right for last column that is, remove the border-right for this table RV Roof Repair Boxes.
I tried like this
table.templateContainer>table:nth-child(3n){
border:none;
}
But it does not work, may i know, how to fix this?
Can anyone help me? thanks in advance.
CSS
.columnsContainer:last-of-type .templateColumn{
border-right:0px;
}
DEMO
You can remove border like so:
.columnsContainer:last-child > table {
border-right: 0;
}
You target the last column with :last-child and remove border in directly table child.
change like this
table.templateContainer tr td:last-child table{
border: none;
}
I have this rule
input{
border: 1px solid #E5E5E5;
}
Here is my jsfiddle
which is needed on most of the site but is messing up some button styling...I thought that adding border: none would overwrite this but it didnt. I cant remove the input styling because its needed sitewide...any workarounds
You could use the :not selector to skip the specific inputs whose default borders you want to keep.
input:not(#submit-me) {
border: 1px solid #E5E5E5;
}
http://jsfiddle.net/S4XST/2/
Perhaps you should consider improving the border as well instead of just using the default.
The border isn't being shown in your fiddle, which is correct.
CSS has very clear rules on the priority given to selectors. An ID-level selector has higher priority than a tag-level selector, so #submit-me should override input.
This is exactly what is happening in your fiddle, and exactly what you want to happen, so I can't quite see what the problem is.
I have the following CSS:
td: hover {
background-color:red;
}
td {
cursor: pointer;
background-color: rgb(150,150,150);
}
and my HTML is just:
<table>
<tr><td> </td></tr>
</table>
I can't get the hover to work. Why is that?
:hover is a pseudo-selector, and everything beginning with : is such (e.g. :active, :before etc.).
This can be confused with specifying values:
something: value;
So you need to think about pseudo-selectors as separate objects, not a value.
That's why you need to fix your td: hover so it looks like td:hover.
Note that if you put a space after td like so:
td :hover { ...
This is equal to:
td: *:hover { ...
and therefore will select all items descending from td and apply a style on hover to them (see this example).
Remember, spaces have a meaning in CSS.
You need to remove the space before :hover:
td:hover {
background-color: red;
}
You just need to remove the space between td :hover as the <td> has no descendants ..
td:hover will work
http://jsfiddle.net/xwYTa/
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';
});
});
<table>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" ></td></tr>
</table>
td {
padding: 15px;
margin: 10px;
}
.here {
background-color: red;
}
http://jsfiddle.net/dZYEM/
How can i modify class .here that this working where child input has attribute readonly? I dont want modify html.
EDIT:
now i have: jsfiddle.net/dZYEM/2/
i would like receive: http://jsfiddle.net/dZYEM/3/
but without use style. I want receive this only with css.
There is no pure CSS way to do this as CSS does not have a has or contains selector.
But this can be done using one line of jQuery. And it's really fast.
$("tr.here:has(input[readonly='readonly'])").css('background', 'red');
Here is a working jsFiddle to try it - http://jsfiddle.net/T7hnR/2/
Hey you have two option
first is if your tr is last than apply this css
tr:last-child{
background:none;
}
Second is if your tr number is 3 than used to it.
tr:nth-of-type(3){
background:none;
}
Like here : http://jsfiddle.net/dZYEM/10/
CSS:
tr:nth-child(3n) {
background: none !important;
}
One could edit the inner element by makiung use of CSS2 selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
But this will not allow you to select the outer parent element.
Under either CSS2 or CSS3 this does not exist, and you would have to do it with the solutions provided with JavaScript/jQuery.