0

I'm not well experienced in CSS, could somebody tell me how could I override styling so that a cell called "Existing Price Breaks" retains it's left border? Similarly the one below would do the same, splitting the content. But the rest of the header should stay without them as it is now.

Here's the fiddle: http://jsfiddle.net/kacpr/YkL5j/2/

That's the part I would like to override on the 'cell' level:

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}
kacpr
  • 440
  • 1
  • 8
  • 28

2 Answers2

1

It doesn't seem the proper way of using the CSS selectors, but here is a possible solution (there's no class for the cell, so we use ":nth-child()" as example:

.table > thead > tr > td:nth-child(4) {
    border-left: 1px solid #ff0000;
}

http://jsfiddle.net/YkL5j/3/

If you need backward browser compatibility, then you may need to assign a class to the selected cell: .existingPriceBreaks {}

A better way for using CSS selectors could be:

.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}

...except you plan to use nested tables for some reason...

Minister
  • 1,198
  • 2
  • 10
  • 18
  • thank you. I'm not sure how it exactly works though and what you said about the selectors. Is there any way to modify it slightly and make the border end in the "Existing price breaks" cell? I wanted it to divide the rows next to it, but be invisible in the first row (since there is no text anyway). – kacpr Jan 20 '14 at 15:17
  • You have 2 rows (Price List Name, Currency, Product Range). Where do you want the border to start and where to end? – Minister Jan 20 '14 at 15:20
  • That's 3 rows, isn't it? ;) And I'd like it to start from Currency, follow in Product Range. – kacpr Jan 20 '14 at 15:22
  • 1
    Let me edit in the JSFiddle, as it's an additional specific requirement... (And yes - that's 3 rows... typo...) – Minister Jan 20 '14 at 15:25
  • thank you. I've noticed you changed the 'nth-child'. So all I was missing was that selectors? :O Actually I've read all your comments from the other answer and I'm even more confused about the 'stronger selector' subject. Good thing I have my answer for which I thank you again. – kacpr Jan 20 '14 at 15:35
  • 1
    I kept my final explanation after you achieve your requirements... I've added a class at 2 cells and replaced the :nth-child with a class. This is needed to select only the cells you need to slyle! Then the styling is easy, but there is "but"... – Minister Jan 20 '14 at 15:38
  • 1
    Stronger selector: In the example you have ".table > thead > tr > td { border: 0; }" and to override it you need equal or stronger selector: ".table > thead > tr > td.class123 { border-left: 1px solid ...; }". Please note that I keep your selector as provided by you: ".table > thead > tr > td" and add a class, which make mine stronger! I hope I've explained it well. You can try removing all ">" selectors and check the results!!! – Minister Jan 20 '14 at 15:41
  • Thank you, I think I'm starting to get it. So the one you wrote - ".table > thead > tr > td.class123 { border-left: 1px solid ...; }" is it equal to the one I had? Or is it stronger? – kacpr Jan 20 '14 at 15:49
  • 1
    Than's another wide CSS topic, please read carefully this one: http://stackoverflow.com/questions/19117761/which-css-selector-is-stronger ...On your question - it is stronger, but it needs class to achive specific effect and this is why it becomes stronger. You can simply omit the class and make it same as your selector - then they're equal and the stronger will be the one you place after the other (I hope explained it, otherwise let someone else explain it in better English) – Minister Jan 20 '14 at 15:55
  • Your explanation was pretty good, don't worry. And thanks again. – kacpr Jan 20 '14 at 15:57
1

You could use a class e.g. leftBordered to override the common border definitions like:

/* in html */
<tr>
  <td>Currency</td>
  <td style="font-weight: normal;">EUR</td>
  <td></td>
  <td colspan="2" class="leftBordered">Existing price breaks</td>
  <td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */

/* in css */
table > thead > tr > td.leftBordered { 
  border-left: 1px solid #ccc;
}

see fiddle for working example here: http://jsfiddle.net/YkL5j/5/

ernd enson
  • 1,764
  • 1
  • 14
  • 29
  • That's what I basically tried before, but it doesn't seem to work. Unless I'm doing something wrong, what you suggested does this: http://jsfiddle.net/kacpr/YkL5j/4/ – kacpr Jan 20 '14 at 15:10
  • @kacpr This doesn't work because of the way you used your CSS selectors. I've added some more explanation in my answer and I really recommend that you use simple selectors (like proposed by ernd or ".table td.leftBordered"), not using the ">" direct child in each rule. Otherwise you should always reset a style through ">" selector... (see the working example)... – Minister Jan 20 '14 at 15:13
  • 1
    @Minister The direct descendant selector has no impact on specificity (eg. `.foo > .bar` is equal to `.foo .bar` in terms of specificity). Bootstrap is to blame for the overly specific selector. The OP has no choice but to use an equally strong or stronger selector. – cimmanon Jan 20 '14 at 15:21
  • 1
    @cimmanon Yes - I tried to explain just that - "The OP has no choice but to use an equally strong or stronger selector". And the reason is because he used this direct child selector on place where not necessary at all... (Sorry for my poor English! I'm still learning!) – Minister Jan 20 '14 at 15:24