how do i change the css property for only one row with a custom class with out removing the styles from the other rows?


Tags: html,css

Problem :

http://codepen.io/louisverdiguel/pen/vCJFh

this is my first time here i hope i am doing it right.

html

I have created a string of rows and columns with html for a client to "resemble" a spreadsheet.

CSS

I have created a css class class="sale td" within the class .

.sale td {border: 1px solid grey; }

to have a border show for each row

issue: i would like to remove the border from any <tr> that contains a <h2> tag

how would i go about creating such a specific class or action with the CSS and what is this method called?



Solution :

You can try like this: LINK

CSS:

.sale tr.no_border td {
    border: 0px !important;
}

HTML:

<tr class="no_border">
  <td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>

    CSS Howto..

    How can I force a css flex child to be the only on its row?

    How can I use symbol fonts like marvosym in the browser?

    How to disable [marquee] tag with CSS? Is this possible?

    How to center vertically child elements inside div [duplicate]

    How to set CSS hover on input

    How to remove curved line in HTML/CSS

    How do I use a gradient as a font color in CSS?

    How to get MetroUI CSS Datepicker value with javascript

    How to change CSS display property using an anchor tag?

    How to vertical-align to x-height?

    how can style be added to the first 2 list elements using CSS

    How to apply an active state to a CSS sprite?

    How to make the page load scrolled down to
    when loaded?

    How to control cursor/caret size with CSS

    how to use jquery closest function

    How to get a div positioned at the bottom of a table

    How to adapt a flex div's width to content

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How to override default CSS in modern GWT applications?

    How to cancel bootstrap CSS left?

    How to change hover background on links in css?

    How would I control the position of a drop down select menu?

    How to change CSS of last tab in Bootstrap Tab

    How to apply background color to buttons using css in asp.net?

    CSS: how to make bottom div width same as the width of image above?

    How to create a smooth zoom and display an overlay when another HTML element gets hovered?

    DOMPDF - How to render PDF to have no margins at all?

    CSS Web fonts how to use it with use of @font-face its not working

    How to make the newly appended html code keep the original css style?