1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with checkbox, :checked and table cells

Discussion in 'CSS' started by xms, Mar 31, 2016.

  1. #1
    My code is not working. It should work when the checkbox is checked or unchecked.

    How could I get this code to change the background color of all cells which class is "name1"?

    CSS code:
    SEMrush
    .player1-checkbox ~ td.name1 {
    background-color: blue;
    }
    
    .player1-checkbox:checked ~ td.name1 {
    background-color: orange;
    }
    Code (CSS):

    HTML code:

    <input type="checkbox" id="player1" class="player1-checkbox" />
    
    <table class="chart">
      <tr><td class="name">Ny Name</td><tr>
      <tr><td class="name name1"><label for="player1">FIRST LAST</label></td></tr>
      <tr><td>&nbsp;</td></tr>
      <tr><td class="cup left name1"><label for="player1">FIRST LAST</label></td>
    </table>
    HTML:
     
    xms, Mar 31, 2016 IP
    SEMrush
  2. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Here is the solution...

    CSS code:

    .player1-checkbox ~ table tr td.name1 {
    background-color: blue;
    }
    
    .player1-checkbox:checked ~ table tr td.name1 {
    background-color: orange;
    }
    Code (CSS):
     
    xms, Mar 31, 2016 IP
  3. KangBroke

    KangBroke Notable Member

    Messages:
    1,025
    Likes Received:
    58
    Best Answers:
    4
    Trophy Points:
    215
    #3
    You shouldn't bastardize classes in this way.
     
    KangBroke, Mar 31, 2016 IP
  4. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #4
    What do you mean?
     
    xms, Mar 31, 2016 IP
  5. KangBroke

    KangBroke Notable Member

    Messages:
    1,025
    Likes Received:
    58
    Best Answers:
    4
    Trophy Points:
    215
    #5
    td class="cup left name1"
    Code (markup):
    @deathshadow said it best ->
    "This type of nonsense reaches the pinnacle of stupidity with CSS frameworks or worse, the so called "Object Oriented CSS" (OOCSS). By their very nature they create presentational markup -- if you don't know what's wrong with code like this:

    <div class="leftCol thirdwidth colorRed sectionHeight bigText">
    Code (markup):
    Do the world a favor and go do something harmless like macramé."

    Source: http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_part4
     
    KangBroke, Mar 31, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,149
    Likes Received:
    1,705
    Best Answers:
    239
    Trophy Points:
    515
    #6
    Really the "classes for nothing" are just the tip of the iceberg of problems here... like what in blazes makes a label and a input be tabular data; much less if you only have one TD per TR what the huff are you even using a table FOR?!?
     
    deathshadow, Apr 2, 2016 IP
    KangBroke likes this.