Problems showing font color in active field

Asked

Viewed 52 times

0

good night!

I’m going through a problem that’s been racking my brain for days. I try to leave the color of the letter in the active tab field, but when I step (color: #fff) to the specific class, it does not change, but it recognizes the background passed in the same class. I tried to change several classes, but without success, as shown in the image.

Could you help me with some hint

This is the page: https://www.colegiofreinet.com.br/duvidas-frequentes2/

inserir a descrição da imagem aqui

Thanks in advance :)

css html5 css3

2 answers

2

You have to change the color of a when the li be with class .ui-state-active 

.ui-state-active a {
    color: red;
}

inserir a descrição da imagem aqui

  • Thanks my friend, that solved my problem. Not wanting to take advantage of the good will, but I did not understand why she did not respect the font parameter, but respected the background ?

  • 1

    @Moisesfausto now I’m on the phone and can not inspect, but I believe it is Pq bg na li já o color na A. And this one with A may be inherited from body or some other part of CSS so I made the rule taking the style of Li and A inside it to be more specific

  • 1

    This makes sense, I really had noticed that the color in A, came inherited and when I changed, I changed all the others. You were very perceptive @Ugo, I thank you again for your help.

  • @Moisesfausto we are here to help, force in the studies that soon you get mad! Abs

1


Moises Fausto I’ll answer your question, but first I’d like to make a few things clear to you.

Your website is not following any convention of good practice, clean code, Patterns design, methodologies among others, some problems that I analyzed just by inspecting the code by the browser were the following:

1) Na tag <head> you’re inserting <script> where their location is within of tag <body> and in the final of all the tag text markings. O Why of this? All javascript runs synchronously by default, this means that when the tag <script> is found, the browser does not render anything else while this script is not loaded and executed.

Insert a <script> in the <head> guarantor that he be executed before any element inserted in tag <body>, to downside is that the user will only view a blank page until the script finishes running. Soon, insert one <script> in the final of <body>, on the other hand, allows the contents before he already is displayed to the user, without having to wait for every detail to be ready before reading the content of the page, to downside is that if your <script> significantly modifies the content and/or its presentation and functionality the user will view a poorly formatted page before the script changes it.

2) Follows the same response pattern for the tag <style> within the tag <head>. When you make it yours <style> is referred to as "CSS Interno", as .class and #id which are used to refer to one or more elements, in this case may only be active on this specific page, but the problema is not only this. So that’s all the code inside <style> will be downloaded each time the page is loaded, to downside is that this increases page loading time and affects only one page with styles, without being able to reuse them.

The correct would be not using the "CSS Interno" nor the "CSS Inline", only the "External CSS". With the "CSS Externo" you have the head start of a cleaner structuring and code reuse, faster loading speed among others.

There are several other problems, but studying and practicing is that you will refine your skills, there are several subjects to be studied, but I will leave the most classic below:

1) HTML5 STYLE GUIDE

2) JAVASCRIPT STYLE GUIDE

3) CSS STRUCTURING METHOD (WELL)

Without further ado, let us answer your question...

You are using several libraries tome caring for with this also, one of the reasons of caution is because you do not have the full control of what is occurring, when will occur and what will happen, one of these examples is his reply. Pay attention now..

You have the following HTML structure:

    <li role="tab" tabindex="-1" class="ui-tabs-tab ui-state-default ui-tab ui-corner-left" aria-controls="tabs-11" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false">
        <a href="#tabs-11" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Ensino Fundamental</a>
    </li>

Note the following: Your hyperlink <a> is inside the tag <li> and the tag <li> has the following nomenclatures of .class: ui-tabs-tab ui-state-default ui-tab and ui-corner-left. As we do not know the true functioning of them, so that no problem occurs the right one would be the following:

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active a {
    color: INSIRA A COR AQUI (NOME, RGB, HEX, ENTRE OUTROS);
}

'Cause in case you’re only modifying us tabs and vertical navs and when the <li> that is within this context is with the ui-tabs-active will modify the element <a> and in more no other region.

  • Ual Thiago, very good explanation. I understood perfectly the problem of good practices, I will fix or try, because this site when I got was already like this.

  • I’m sure it was very enlightening, thank you!

  • @Thank you and thank you! If you can leave my answer as the correct one, I would appreciate it.

  • This site is sad, yesterday I tried to improve some things, using minification of css and JS and image size, but bugged the whole site. I think if changing is not going to be a good idea, it would be better to change some parameters or redo it, taking advantage of some things.

Browser other questions tagged css html5 css3

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