6 Replies - 232 Views - Last Post: 20 June 2020 - 04:58 AM

#1 LEON1937   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 13-June 20

CSS ID - can this be one ID?

Posted 19 June 2020 - 08:10 AM

This is my stylesheet
<STYLE>
table {
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    border: 2px solid black;
}

td {
    border-bottom: 1px solid black;     // Customiseable
    border-right: 1px solid black;
    border-left: 1px solid black;
}

tbody tr:nth-child(odd) {
    background-color: gainsboro;        // Customiseable
}

tbody tr:nth-child(even) {
    background-color: silver;           // Customiseable
}
</STYLE>


1 How can I assign it an ID - I only want it to apply to one table on my page?

2 And how can I make the three styles customisable? (see my previous post about storing colours in a sql table)

Is This A Good Question/Topic? 0
  • +

Replies To: CSS ID - can this be one ID?

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,545
  • Joined: 08-June 10

Re: CSS ID - can this be one ID?

Posted 19 June 2020 - 08:21 AM

1. e.g. #foo table { ... }
2. either create the CSS through stripting or use a CSS preprocessor (e.g. SASS or LESS)
Was This Post Helpful? 0
  • +
  • -

#3 LEON1937   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 13-June 20

Re: CSS ID - can this be one ID?

Posted 19 June 2020 - 08:52 AM

View PostDormilich, on 19 June 2020 - 03:21 PM, said:

1. e.g. #foo table { ... }
2. either create the CSS through stripting or use a CSS preprocessor (e.g. SASS or LESS)

Like this?
<STYLE>
#foo table {
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    border: 2px solid black;
}

td {
    border-bottom: 1px solid black;     // Customiseable
    border-right: 1px solid black;
    border-left: 1px solid black;
}

tbody tr:nth-child(odd) {
    background-color: gainsboro;        // Customiseable
}

tbody tr:nth-child(even) {
    background-color: silver;           // Customiseable
}
</STYLE>


Does FOO take on ALL elements of the stylesheet?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,545
  • Joined: 08-June 10

Re: CSS ID - can this be one ID?

Posted 19 June 2020 - 09:08 AM

Quote

Does FOO take on ALL elements of the stylesheet?

Of course not.
Was This Post Helpful? 0
  • +
  • -

#5 LEON1937   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 13-June 20

Re: CSS ID - can this be one ID?

Posted 19 June 2020 - 10:24 AM

View PostDormilich, on 19 June 2020 - 04:08 PM, said:

Quote

Does FOO take on ALL elements of the stylesheet?

Of course not.

Soooo, back to my original query, how?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,545
  • Joined: 08-June 10

Re: CSS ID - can this be one ID?

Posted 19 June 2020 - 05:44 PM

the same way.
Was This Post Helpful? 0
  • +
  • -

#7 LEON1937   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 13-June 20

Re: CSS ID - can this be one ID?

Posted 20 June 2020 - 04:58 AM

Okay, these are my stylesheets, both work, but which is correct, both are I guess as they work

<STYLE>
table {
    border: 1px solid black;
    border-collapse: collapse;
}

table th {
    border: 2px solid black;
}

table td {
    border-bottom: 0px solid black;     // Customiseable or 1px
    border-right: 1px solid black;
    border-left: 1px solid black;
}

table#ZEBRA1 tbody tr:nth-child(odd) {
    background-color: gainsboro;        // Customiseable
}

table#ZEBRA1 tbody tr:nth-child(even) {
    background-color: silver;           // Customiseable
}

table#ZEBRA2 tbody tr:nth-child(odd) {
    background-color: cornsilk;        // Customiseable
}

table#ZEBRA2 tbody tr:nth-child(even) {
    background-color: aliceblue;       // Customiseable
}
</STYLE>


and

<STYLE>
table {
    border: 1px solid black;
    border-collapse: collapse;
}

table th {
    border: 2px solid black;
}

table td {
    border-bottom: 0px solid black;     // Customiseable or 1px
    border-right: 1px solid black;
    border-left: 1px solid black;
}

#ZEBRA1 tbody tr:nth-child(odd) {
    background-color: gainsboro;        // Customiseable
}

#ZEBRA1 tbody tr:nth-child(even) {
    background-color: silver;           // Customiseable
}

#ZEBRA2 tbody tr:nth-child(odd) {
    background-color: cornsilk;        // Customiseable
}

#ZEBRA2 tbody tr:nth-child(even) {
    background-color: aliceblue;           // Customiseable
}
</STYLE>


Cheers folks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1