CODEWITHSUNDEEP
csscss-selectors
Dave
Dave

Reputation: 2905

set first a-tag on bold with css

i have a fixed html structure where i would like to set bold only the first a href-Tag in the "categories" class

In my Example Code i like to seht this links bold:

Here is my html code:

<div class="content-box-main-inner clearfix">
    <div class="categories">
        <div class="cat_icon">
            <a href="/zum-kleben/">
                <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"></a>
         </div>
            <div class="cat_link" style="padding-left:8px;">
                <div class="cat_link_container">
                    <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a>
                </div>
                <div class="cat_icon">
                    <a href="/zum-kleben/Knoepfe-Klebehaken/">
                        <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"></a>
                    </div>
                    <div class="cat_sub_link" style="padding-left:8px;">
                        <div class="cat_link_container">
                            <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a>                 </div>
                    </div>
                    <div class="cat_icon">
                        <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/">
                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a>
                        </div>
                        <div class="cat_sub_link" style="padding-left:8px;">
                            <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="categories">
                    <div class="cat_icon">
                        <a href="/Zum-Heften/">
                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a>
                        </div>
                        <div class="cat_link" style="padding-left:8px;">
                            <div class="cat_link_container">
                                <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a>
                            </div>
                            <div class="cat_icon">
                                <a href="/Zum-Heften/Pistolen/">
                                    <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen / Etikettierpistolen" title="Heftpistolen / Etikettierpistolen"></a>
                                </div>
                                <div class="cat_sub_link" style="padding-left:8px;">
                                    <div class="cat_link_container">
                                        <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen / Etikettierpistolen</a></div>
                                </div>
                            </div>
                        </div>
                        <div class="categories">
                            <div class="cat_icon">
                                <a href="/zum-auf-und-abhaengen/">
                                    <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a>
                                </div>
                                <div class="cat_link" style="padding-left:8px;">
                                    <div class="cat_link_container">
                                        <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a>
                                    </div>
                                    <div class="cat_icon">
                                        <a href="/zum-auf-und-abhaengen/Haken/">
                                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a>
                                        </div>
                                        <div class="cat_sub_link" style="padding-left:8px;">
                                            <div class="cat_link_container">
                                                <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a>
                                            </div>
                                        </div>
                                        <div class="cat_icon">
                                            <a href="/zum-auf-und-abhaengen/Faeden/">
                                                <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a>
                                            </div>
                                            <div class="cat_sub_link" style="padding-left:8px;">
                                                <div class="cat_link_container"> 
                                                    <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

Here is my CSS Code (is not working :( ):

.catetories.cat_icon:first-child a{
    font-weight:bold;
}

Here is my JSFIDDLE example Code.

Hope someone have a idea.

Upvotes: 0

Views: 90

Answers (4)

Fabian Mebus
Fabian Mebus

Reputation: 2415

.cat_link > .cat_link_container > a should do the job. The child combinator > was first defined in CSS level 2 so you have a better browser support as with the structural pseudo-classes :nth-child(n) for instance. Here you have the w3c-spec for css selectors.

.cat_link > .cat_link_container > a {
    font-weight: bold;
}
<div class="content-box-main-inner clearfix">
  <div class="categories">
    <div class="cat_icon">
      <a href="/zum-kleben/">
        <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"></a>
    </div>
    <div class="cat_link" style="padding-left:8px;">
      <div class="cat_link_container">
        <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a>
      </div>
      <div class="cat_icon">
        <a href="/zum-kleben/Knoepfe-Klebehaken/">
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"></a>
      </div>
      <div class="cat_sub_link" style="padding-left:8px;">
        <div class="cat_link_container">
          <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a>                 </div>
      </div>
      <div class="cat_icon">
        <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/">
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a>
      </div>
      <div class="cat_sub_link" style="padding-left:8px;">
        <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a>
        </div>
      </div>
    </div>
  </div>
  <div class="categories">
    <div class="cat_icon">
      <a href="/Zum-Heften/">
        <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a>
    </div>
    <div class="cat_link" style="padding-left:8px;">
      <div class="cat_link_container">
        <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a>
      </div>
      <div class="cat_icon">
        <a href="/Zum-Heften/Pistolen/">
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen / Etikettierpistolen" title="Heftpistolen / Etikettierpistolen"></a>
      </div>
      <div class="cat_sub_link" style="padding-left:8px;">
        <div class="cat_link_container">
          <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen / Etikettierpistolen</a></div>
      </div>
    </div>
  </div>
  <div class="categories">
    <div class="cat_icon">
      <a href="/zum-auf-und-abhaengen/">
        <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a>
    </div>
    <div class="cat_link" style="padding-left:8px;">
      <div class="cat_link_container">
        <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a>
      </div>
      <div class="cat_icon">
        <a href="/zum-auf-und-abhaengen/Haken/">
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a>
      </div>
      <div class="cat_sub_link" style="padding-left:8px;">
        <div class="cat_link_container">
          <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a>
        </div>
      </div>
      <div class="cat_icon">
        <a href="/zum-auf-und-abhaengen/Faeden/">
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a>
      </div>
      <div class="cat_sub_link" style="padding-left:8px;">
        <div class="cat_link_container">
          <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a>
        </div>
      </div>
    </div>
  </div>

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

.categories .cat_link > div:nth-child(1)  a {
    font-weight: bold;
}
<div class="content-box-main-inner clearfix">
    <div class="categories">
        <div class="cat_icon"> <a href="/zum-kleben/">
            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"/></a>

        </div>
        <div class="cat_link" style="padding-left:8px;">
            <div class="cat_link_container"> <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a>

            </div>
            <div class="cat_icon"> <a href="/zum-kleben/Knoepfe-Klebehaken/">
                <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"/></a>

            </div>
            <div class="cat_sub_link" style="padding-left:8px;">
                <div class="cat_link_container"> <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a> 
                </div>
            </div>
            <div class="cat_icon"> <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/">
                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a>

            </div>
            <div class="cat_sub_link" style="padding-left:8px;">
                <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a>

                </div>
            </div>
        </div>
    </div>
    <div class="categories">
        <div class="cat_icon"> <a href="/Zum-Heften/">
                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a>

        </div>
        <div class="cat_link" style="padding-left:8px;">
            <div class="cat_link_container"> <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a>

            </div>
            <div class="cat_icon"> <a href="/Zum-Heften/Pistolen/">
                                    <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen / Etikettierpistolen" title="Heftpistolen / Etikettierpistolen"></a>

            </div>
            <div class="cat_sub_link" style="padding-left:8px;">
                <div class="cat_link_container"> <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen / Etikettierpistolen</a>
                </div>
            </div>
        </div>
    </div>
    <div class="categories">
        <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/">
                                    <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a>

        </div>
        <div class="cat_link" style="padding-left:8px;">
            <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a>

            </div>
            <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/Haken/">
                                            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a>

            </div>
            <div class="cat_sub_link" style="padding-left:8px;">
                <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a>

                </div>
            </div>
            <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/Faeden/">
                                                <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a>

            </div>
            <div class="cat_sub_link" style="padding-left:8px;">
                <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a>

                </div>
            </div>
        </div>
    </div>

Upvotes: 0

And Finally
And Finally

Reputation: 5704

Just make your CSS

.categories > .cat_link > .cat_link_container > a {
    font-weight:bold;
}

https://jsfiddle.net/gwjw0z9s/.

You have to be quite specific to select the top-level text links you want. In this case we use the > sign to select a tags which are the immediate child of a .cat_link_container div, which are in turn the immediate child of a .cat_link div. This allows us to exclude the sub-links in the .cat_sub_link divs.

Upvotes: 1

Abdul Sadik Yalcin
Abdul Sadik Yalcin

Reputation: 1822

It's not working because you have multiple cat_icon class and your CSS code is targeting the first child of every single cat_icon which is normal.

If you want to keep that structure just add a class to the tag you want bold.

<a class="bold" ... ></a>

a.bold { font-weight: bold; }

https://jsfiddle.net/sadikyalcin/xywm2tog/

Upvotes: 0

Related Questions