CODEWITHSUNDEEP
css
bluewater2222
bluewater2222

Reputation: 23

Class Link works for what I am doing, however, it changes styling of all links on site

I have a site in Wordpress where I am inserting a block with html.

This is the inserted html code:

<div class=“options-bar”>

<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>FUEL INJECTORS</a>
<a href="https://total-speed-customs.myshopify.com/collections/ignition" class=“options-bar-btn”>IGNITIONS</a>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>BOLTS</a>
<a href="https://total-speed-customs.myshopify.com/collections/e85-fuel" class=“options-bar-btn”>ELECTRONICS</a>
<a href="https://total-speed-customs.myshopify.com/collections/trailer-parts" class=“options-bar-btn”>WINCHES</a>

HITCHES

</div>

This is in the theme.css stylesheet at the very bottom:

.options-bar {
text-align: center;

}

.options-bar-btn, a { display: inline-block; 
color: white !important;
text-decoration: none; 
background: black !important; 
padding: 10px 20px; 
margin: 0px 5px; 
border-radius: 6px;  
text-align: center;
font-size: 22px;

}

@media screen and (max-width: 500px)  {

.options-bar-btn, a { display: inline-block; 
color: white !important;
text-decoration: none; 
background: black !important; 
padding: 3px 3px; 
margin: 0px 1px; 
border-radius: 3px;  
text-align: center;
font-size: 10px;

}

}

It works for the inserted block html, but it also changes the styling of links sitewide. I've enclosed a link to the site in progress to show the row of buttons working correctly, but the top nav has the same styling, which needs to just be transparent for the logo and the main nav.

What I'm missing?

https://total-speed-customs.myshopify.com/

Upvotes: 0

Views: 40

Answers (1)

Kirill
Kirill

Reputation: 71

Your expression .options-bar-btn, a {...} means the following: set the following styles to all elements that have class options-bar-btn and to all tags a as well.

The comma in your code is a separator between two rules.

When you need to set a rule for an element that is a child of an element with class options-bar:

.options-bar a {
   color: white !important;
}

This will select all a tags inside the elements with class options-bar.

If you want to change a style of all the links with class options-bar-btn:

a[class*="options-bar-btn"] {
    color: white !important;
}

This will select all tags a then filter elements that has options-bar-btn class set.

Upvotes: 2

Related Questions