css Question posted in
Some basic documentation can be found here.

Css – How can I color the first line of table?

I want to color only first line of table.
Assignment require me to use xml. So I use CSS to show the table.

this is how i want it to looks like

and this is how it actually looks like now

website {
  display: table;
  width: 80%;
  border-collapse: collapse;
  margin-top: 20px; 
  margin-left: 20px; 
}

menu {
  display: table-row;
}

menu > * {
  display: table-cell;
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

menu > page {
  font-weight: none;
}

menu > url {
  text-align: center;
}
<website>
  <menu>
   <page>Page Name</page>
   <url>URL</url>
  </menu>
  <menu>
    <page>Home</page>
    <url>index.html</url>
  </menu>
  <menu>
    <page>Products</page>
    <url>products.html</url>
  </menu>
  <menu>
    <page>About</page>
    <url>about.html</url>
  </menu>
  <menu>
    <page>Contact</page>
    <url>contact.html</url>
  </menu>
</website>

I have no idea how to make it.
I want to color only first line of table by using XML and CSS

Tags:

2

Answers


  1. 0

    css-selector first-child should do the trick.

    menu:first-child {
    display: table-row;
    background-color: green;
}
    Login or Signup to reply.
  2. 0

    I want to color only first line of table by using XML and CSS

    It sounds like you’re looking for the :first-child pseudo-class. For example:

    menu:first-child {
  background-color: blue;
}

    Which would make the first instance of <menu> (well, the first child instance in any set of one or more child instances) blue:

    website {
  display: table;
  width: 80%;
  border-collapse: collapse;
  margin-top: 20px; 
  margin-left: 20px; 
}

menu {
  display: table-row;
}

menu:first-child {
  background-color: blue;
}

menu > * {
  display: table-cell;
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

menu > page {
  font-weight: none;
}

menu > url {
  text-align: center;
}
    <website>
  <menu>
   <page>Page Name</page>
   <url>URL</url>
  </menu>
  <menu>
    <page>Home</page>
    <url>index.html</url>
  </menu>
  <menu>
    <page>Products</page>
    <url>products.html</url>
  </menu>
  <menu>
    <page>About</page>
    <url>about.html</url>
  </menu>
  <menu>
    <page>Contact</page>
    <url>contact.html</url>
  </menu>
</website>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search