Apply CSS to a single element on a page

Hello,
Can you show me how to attach some css code to a text element and only that specific text element on a page? I have a table with some css styling but it is affecting the whole page. This is the code I have in the CSS section of the page.

body {
font-family: “Open Sans”, sans-serif;
line-height: 1.25;
}

table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 5px;
width: 100%;
table-layout: fixed;

}

table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}

table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

table th,
table td {
padding: .625em;
text-align: center;
}

table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}

@media screen and (max-width: 800px) {
table {
border: 0;
}

table caption {
font-size: 1.3em;
}

table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}

table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

table td::before {
/*

  • aria-label has no advantage, it won’t be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    }

table td:last-child {
border-bottom: 0;
}
}

tr:nth-child(even) {
background-color: #dadada
}

Hi there,

The easiest approach would be to use the V2 Text Element and you should be able to use the Element CSS.

Kindly check the link above on how to use the Element CSS feature. Using it would allow you to be able to target the specific element and add custom CSS to it without affecting other elements.

Hope this helps.

Thank you for the reply. I have tried suing both the page and the text’s css but it still changes the layout of other items on the page. For example, it causes the footer widgets text to change by removing spaces between lines.

Hi Derp,

The best approach is to assign a class name to your Table (my-custom-table). Then target your CSS to that table class only.

Example:
<table class="my-custom-table">

Then you can rename your table CSS with the class name my-custom-table, so that it will apply only to that table.

.my-custom-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 5px;
  width: 100%;
  table-layout: fixed;
}

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.