Change table name with :Nth-of-type

Asked

Viewed 49 times

-1

I’m trying to change the name of a column of my table through css, tried something like:

th#colunatableprod:nth-of-type(1):before { content: "Produto"!important; }

My table:

 <table class="table">
    <thead class="black white-text">
        <tr>
            <th id="colunatableprod" scope="col">Produto</th>
            <th id="colunaindicelucro" scope="col">Índice de Lucro</th>
            <th id="colunamlpremium" scope="col">ML Premium</th>
            <th id="colunamlclassico" scope="col">ML Clássico</th>
        </tr>
    </thead>

        <tr>
           <td>x</td>
           <td>y</td>
           <td>z</td>
           <td>aa</td>

       </tr>
</table>
html css
  • 1

    With CSS you cannot change DOM nodes. Only with Javascript.

  • with you yes because I already do it with a table, but I want to do it with two tables in the same css, I got it but I can’t remember now.

  • 1

    An id is unique, you should not use Nth-of-type(1) for something unique.

  • A simple Javascript line replaces the text of an element with an id easily. But...

  • In my view pseudo-classes do not serve to change us. Vc can even mask, but that is not the use of the resource.

2 answers

2

When using nth-of-type(1) in a id is already incorrect because a id should be unique on the page (read). This assumes that you want to use the same id in more than one element.

Only with CSS you won’t be able to change the content of a text node. CSS is used to define visual styles of elements, not to change their nodes, because pseudo-classes are not real us (from the Greek, pseudo = false). The most you will do is to add a mask over an element, and not actually change the node.

For this type of function you use Javascript, which is already included in the browser. Just use the method .textContent (when it is text only) or .innerHTML (when there are HTML tags):

document.getElementById("colunatableprod").textContent = "Produto Novo";

  • Great explanation I didn’t know this . textContent really solves with a line

0


I believe you have the wrong view of how the content in the ::after, It will not replace the text that is inside the tag, it will add the content of content: "" within the tag.

So to work the way you want, first you have to "delete" the text that is inside the tag, for this I suggest font-size: 0, even if it is not semantic, because I will consider it as a spiritual case ok.

After that you have to create your own content and put the font-size back because if you don’t put the font size it will inherit the size 0 that was the size of "dad"

Now look at the code:

#colunatableprod:nth-of-type(1) { font-size: 0; }
#colunatableprod:nth-of-type(1)::before { font-size: 12px; content: "Produto 1"; color:red; }
<table class="table">
    <thead class="black white-text">
        <tr>
            <th id="colunatableprod" scope="col">Produto</th>
            <th id="colunaindicelucro" scope="col">Índice de Lucro</th>
            <th id="colunamlpremium" scope="col">ML Premium</th>
            <th id="colunamlclassico" scope="col">ML Clássico</th>
        </tr>
    </thead>

        <tr>
            <td>x</td>
            <td>y</td>
            <td>z</td>
            <td>aa</td>

        </tr>
</table>

  • 1

    @sam I think the JS is there to be used even! There are cases that it solves better than CSS, as in this case the element has ID. Better than using font 0. But if one doesn’t know JS there is a solution with rss CSS. I think it would be valid you make a model with JS, will have people who will prefer that way you can know. The more option the better, the question doesn’t need just one answer :)

  • Because it’s Ugo... I take direct negative with suggestions that solve, but not that it’s ideal. Posting low-quality answers just because "it works" isn’t ideal. The ideal, at least what I have learned over time by taking the negatives, is to suggest to AP the best way instead of posting something bad. For me it is to encourage the lay PA to use inappropriate resources for certain types of cases.

  • Well, he asked you to post a better answer, in the way you suggest ideal. But apparently you prefer to complain aheauheua

  • @Leticia I’m not complaining. I’m just saying that this is not the ideal and correct way to do it. But if you want to use it, I wish you good luck.

  • @Sam I understand your point. Maybe the way to do it is not the ideial, but at the same time I’m sure that the answer served at least to understand why it did not work. The better way to do it, I let her choose the one that suits her best. Maybe the JS is the best option, do not let a downvote inhibits you from answering (if anyone will vote against), but put your point of view and your answer, if it is to the liking of the community, not only the author of the question, for sure you get a few dots.

  • Hugão, the vision is not to gain "a few points", it is to post quality answers, there yes, the points make sense.

  • @sam i understand, I left the answer explaining the problem with the content, but unfortunately I do not have the knowledge in js to give an explanation from this point of view, the space is open for you to give your suggestion and more clarification of the option with js

  • I will vote negative because I find your answer useless. OBS.: I am voting on the answer and not on the author of it.

  • @sam then completes his reply explaining why this content does not replace the text that is already within the tag and just makes a "append". If you want you can take part of my answer, then I can erase this one

Show 4 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.