possible dominating class over parent element w/ id applied? pseudo-class?

[rubyhaus]

Hey everyone this is my first discussion post here. Love connecting with other css dudes and dudets.

Is there a sneaky way of creating a dominating class that can be used globally throughout? Without doing like: div p .classname?

Here’s what I mean. I understand that, when you specify a, a:link, a:active, a:visited, and a:hover that those have first priority.

Then when you apply to a P tag an id say p#footerinfo… and then to it’s anchor tags p#footerinfo a:link etc… that any link within p#footerinfo has top priority over the global (a:link). AND…
I understand that when you put an Anchor tag within p#footerinfo, and that inner anchor element has a unique id say a.customlink, that the css of p#footerinfo a:link still has raining priority.

So how, or is there a clever way, of telling a.customlink within a paragraph of high priority power suchas: p#footerinfo, to be stronger than p#footerinfo’s anchor tag properties??

here’s some CSS markup and then HTML markup to clear up my question:

a {

color: #000;

font-weight:bold;

text-decoration: none;}



a:hover {

color:#333;}





#footerinfo {

color:#333333;

background:#ffffff;

margin-bottom:12px;}



#footerinfo a {

color:#fff;}



#footerinfo a:hover {

color:#000;}





a.customlink,

a.customlink:link,

a.customlink:active,

a.customlink:visited,

a.customlink:hover {

color: #333;

font-weight: normal;

text-decoration: none;

cursor: text;}

HTML with id on P tag

blah blah blah a link blah blah blah

(or)

HTML with id on Div

blah blah blah a link blah blah blah

[rubyhaus]

So my “Goal” here is to have “customlink” be dominating without having to do inheritance like css suchas:

div p#footerinfo a.customlink:link

instead

a.customlink:link (dominating.pseudo-class awesomeness)

[TheDoc]

You can use !important, though it’s always best to try to avoid it.

[xpy]

OK… Some Days ago, @wolfcry911 told me that having an ID on the is a good idea, I thought it wasn’t… He also gave me this link->https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/ which (of course) I didn’t ready very closely… Anyway… You put an id on the body and tada! dominating.pseudo-class awesomeness… Well… At least it works for this example… You could use !important too of course, but I think it always as the last solution…

[rubyhaus]

Yes I agree. I’ve been desperately avoiding the important. I only use that on final overlaying themes or child themes of a designed platform.

Aghh XPY! very well done. I think this is a great example of what I’m going for. I’m using this for specific mobile to desktop linking. Making a telephone number clickable on phone and then hiding the styling of that on the desktop.

This is also very useful in other cases too. Thank you very much for the wisdom.

[Author]

Posts