I added some pseudo elements to my website for all a links.
#main-content .content .post-inner .entry p a::before {
content: "\f08e";
font-family: FontAwesome;
margin-left: 2px;
margin-right: 3px;
font-size: 12px;
}
That was working fine, later I realized that it is placing an icon also for Link Anchor as example
<a id="anchorname"></a>
My question would be, if it is possible to unset the content if a id is given to the href. The main problem with that is that my anchor ids are never the same.
You could use the :not selector combined with an attribute selector. Then set the content's value of ::before back to its default value, which is normal, in order to make it dissapear (or use diplay: none, they would both work in your case).
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.
#main-content .content .post-inner .entry p a:not([id])::before {
content: normal;
}
You need to select on the attribute selector [enterAttributeHere] in conjunction with the :not selector. The basic format of this would hence be
a:not[id]
A quick demonstration of this can be seen below:
a {
background: tomato;
height: 30px;
width: 100px;
display: block;
margin: 5px;
}
a:not([id]) {
background: blue;
}
test
test
test
test
test
If you need to be even more specific, such as if the id contains/starts with/Ends with/etc a certain value, you could further specify by using*
[id] {
/* Attribute exists */
}
[id="foo"] {
/* Attribute has this exact value */
}
[id*="foo"] {
/* Attribute value contains this value somewhere in it */
}
[id~="foo"] {
/* Attribute has this value in a space-separated list somewhere */
}
[id^="foo"] {
/* Attribute value starts with this */
}
[id=|"foo"] {
/* Attribute value has this in a dash-separated list somewhere */
}
[id$="foo"] {
/* Attribute value ends with this */
}
* Sourced from CSS-tricks
The :not() negation pseudo-class would be my first choice. That's been provided already in other answers. A second option is to create another rule that styles anchor elements with ID attributes:
a[id] { ... }
You'll just have to note the order of the rules in your code and their specificity.
6.3. Attribute
selectors
[att]
Represents an element with the att attribute, whatever the value of the attribute.
Related
I have 2 stylesheet files, style.css, and index.css which are loading respectively
1-style.css
2-index.css
in my style.css I have code like this
#mainNav nav > a:hover span:before {
background-color: transparent !important;
}
#mainNav nav a.darkBlue span:before {
background-color: #17729a;
}
now in my index.css
when I write
#mainNav .darkBlue span:before {
background-color: transparent;
}
It doesnt work and I should write !important at the end to make it work
but when I write selectors order in a different way like the way I used in my style.css it works without !important
like this
#mainNav nav a.darkBlue span:before {
background-color: transparent;
}
Why?
CSS has a hierarchy. If you you wanna overwrite some styles you have to use the same selectors or some more specific.
Example:
a.selector { color: blue }
.selector { color: red }
The color will not be changed.
But
.selector { color: blue }
a.selector { color: red }
will change the color to red, because the combination of TAG and class selector you are more specific.
Your declarations are being applied based on how specific they are.
Per MDN - Specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
The link above also goes into the factors that determine specificity:
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)
CSS chooses which rules to apply based on a few conditions. Given rules applying to the same element, they are regarded in the following order:
1. !important
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
span { color: green !important; } /* important */
<span id="mySpan" style="color: purple;">Example</span>
2. Inline styles
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
<span id="mySpan" style="color: purple;">Example</span>
3. Specificity
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
<span id="mySpan">Example</span>
4. Last declared
span { color: red; } /* base */
span { color: yellow; } /* last applied */
<span>Example</span>
It's generally best to avoid using !important wherever possible. If you throw them around carelessly, there may come a time when you actually need to override one, but you've already used your highest order of precedence.
You have something called CSS specificity:
https://www.w3schools.com/css/css_specificity.asp
A really great read on what comes first and the order of specificity: check https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Be aware, it's a loooong article. Most people don't even have the slightest idea of how far this goes.
Simply put: If two CSS selectors apply to the same element, the one
with higher specificity wins.
That's why I follow the BEM methodology, this prevents these kinds of hassles.
Suppose I have an element with 2 classes that both apply padding-left to it:
<section class="pad1 pad2">
...
</section>
then in my .css file
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
How will padding-left be applied?
What rules should I know in this kind of situations?
I hope you understand.
.pad1{
padding-left:60px;
}
.pad2{
padding-left:30px;
}
.pad3{
padding-left:30px;
}
.pad4{
padding-left:60px;
}
<section class="pad1 pad2">
Hi, This is css padding solution.
</section>
<section class="pad3 pad4">
Hi, This is css padding solution.
</section>
Your question is all about CSS selection precedence rules. At first you should understand what is CSS precedence value for each selector.
We usually use as a CSS selector class, ID, tag name, inline etc. Each selector have own priority value, priority table like below:
For each tag (a, div, p etc.) selector = 1,
For each class and pseudo-class (.class1, .class1:active etc) selector = 10,
For each ID (#id) selector = 100,
For each inline style (<div style="color:red"></div>) selector = 1000,
For each !important (.class { color: red !important;}) selector = Infinity.
Suppose right now you have a selector like following:
#nav ul a { color: gray; } = 100 (#nav) + 1 (ul) + 1 (a) = 102
Now come on your point, you have 2 class selector .pad1 and .pad2 which each selector value is 10 means equal so which one will work? If selection priority if equal then most last one will work so .pad2 will be work, because CSS parser read document top to bottom. But if selection priority is different then higher one will work in this case order dose not matter.
For better understand see here with more clear explanation: https://css-tricks.com/specifics-on-css-specificity/
In this situation always last one CSS class will be on priority:
If .pad2 will be last one then it will be overwrite on previous class .pad1 like below:-
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
<section class="pad1 pad2">
This is class section
</section>
If .pad1 will be last one then it will be overwrite on previous class .pad2 like below:-
.pad2 {
padding-left: 30px;
}
.pad1 {
padding-left: 60px;
}
<section class="pad1 pad2">
This is class section
</section>
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet. However With !important, the property will now give priority to the latest important value.
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
Let's say I have following CSS :
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
and my markup is :
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
My question is Does the CSS above translate to :
body {
color: blue;
}
div {
color: green;
}
#alert{
color: red;
}
or is there an additional
* {
color: red;
}
Without variables the universal selector applies the same CSS on all elements. Does this change and the styling becomes dependent on elements?
One more question I have is if :root translates to body in CSS.
Here is a CodePen demo : http://codepen.io/anon/pen/RrvLJQ
As you've correctly stated in your title, custom properties cascade. In fact, this is why the module is called CSS Custom Properties for Cascading Variables. That means your custom property --color is evaluated as-is per element, just as with any other CSS property. In terms of the actual styles that are applied to your elements, what you really only have is:
* {
color: var(--color);
}
The var(--color) value is then evaluated for each element based on how the --color property cascades. So it follows that:
The body element has a blue foreground.
Any div elements have a green foreground.
The element whose ID is "alert" has a red foreground.
Because you don't have a --color definition for *, it's inherited by default. Therefore all other elements inherit --color from their parent element: body > p inherits from body, becoming blue, and #alert > p inherits from #alert, becoming red.
If you really do want to express the cascaded values in terms of CSS, you could say that it translates to the following:
:root {
color: blue;
}
div {
color: green;
}
#alert {
color: red;
}
* {
color: inherit;
}
But only because the original CSS contains an explicit * { color: var(--color); } definition which ensures that every element's color maps to --color.
Note also that the code that you have comes from an example within the spec, which itself is described as follows:
If a custom property is declared multiple times, the standard cascade rules help resolve it. Variables always draw from the computed value of the associated custom property on the same element
One more question I have is if :root translates to body in CSS.
:root doesn't translate to any element in CSS, because CSS is document language-agnostic.
:root doesn't translate to body in HTML; it corresponds to html.
How do I hide this "Data tracking area" which is in the footer? This is the code. I'm on WordPress so I can't edit the CSS but add extra. I tried hiding it using the display:none; but did not work.
<div id="footer" data-tracking-area="footer">
I tried this code but did not work.
.data-tracking-area{
display:none;
}
You can add following css
#footer{
display:none;
}
You can use an attribute selector. Like this:
[data-tracking-area="footer"] {
display:none;
}
Attribute selectors are case-sensitive, and are written inside
brackets [].
There are seven different types of matches you can find with an
attribute selector, and the syntax is different for each. Each of the
more complex attribute selectors build on the syntax of the exact
match selector — they all start with the attribute name and end with
an equals sign followed by the attribute value(s), usually in quotes.
What goes between the attribute name and equals sign is what makes the
difference among the selectors.
[data-tracking-area] {
/* Attribute exists */
}
[data-tracking-area="footer"] {
/* Attribute has this exact value */
}
[data-tracking-area=*"footer"] {
/* Attribute value contains this value somewhere in it */
}
[data-tracking-area=~"footer""] {
/* Attribute has this value in a space-separated list somewhere */
}
[data-tracking-area=^"footer"] {
/* Attribute value starts with this */
}
[data-tracking-area=|"footer"] {
/*Attribute value starts with this in a dash-separated list */
}
[data-tracking-area=$"footer"] {
/* Attribute value ends with this */
}
Here a basic example:
[data-tracking-area="footer"]{
height: 50px;
background: green;
}
[data-tracking-area*="foo"]{
color: #fff;
text-align: center;
}
[data-tracking-area$="footer"]{
text-transform: uppercase;
padding-top: 10px;
}
<div id="footer" data-tracking-area="footer">select me by atrtibute selector</div>
You can use the one that best suits your needs.
Docs: https://css-tricks.com/almanac/selectors/a/attribute/
You can provide styling inline too. As below:
<div id="footer" data-tracking-area="footer" style="display:none;">
Try this, hope gonna work.