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.
Related
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
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; }
My html page structure is like this
<div id="myPage">
<div class="input-group bootstrap-touchspin">
<input id="784069" class="form-control my-class touchspin" type="text" value="0" name="784069" default-field="True" style="display: block;">
</div>
</div>
I tried to fetch this element with css like this
#myPage .input-group .bootstrap-touchspin {
}
It has to be #myPage .input-group.bootstrap-touchspin because the space indicates the next class is a child of the previous. No space means both classes belong to the same element.
Targeting the <input> element
If you want to target the actual <input> element, you should use this CSS :
#myPage .bootstrap-touchspin .touchspin {
/* properties go here */
}
The following alternatives also all target the <input> element :
#myPage .bootstrap-touchspin input.my-class {
/* properties go here */
}
#myPage .bootstrap-touchspin input {
/* properties go here */
}
#myPage input.touchspin {
/* properties go here */
}
#myPage .my-class {
/* properties go here */
}
#784069 {
/* properties go here */
}
...
Targeting the <div> element
If you want to target the <div> element surrounding the <input> element, you should use this CSS :
#myPage .bootstrap-touchspin {
/* properties go here */
}
The following alternative should also work :
#myPage .input-group {
/* properties go here */
}
Notes :
There are many ways to combine different selectors, that each have their own meaning. For an overview, take a look at the W3Schools CSS Selector Reference.
In the latter case (targeting the <div> element), you could use #myPage .input-group.bootstrap-touchspin { ... } (without the space). However, you don't really need the extra .input-group class because #myPage .bootstrap-touchspin { ... } is already pretty specific. See this article for an introduction to CSS specificity.
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.
Example HTML:
<div itemid="MenuContainer" id="MenuContainer" class="MenuContainer">
Example CSS:
#MenuContainer {
/* Styles */
}
How can I use CSS to target ItemID instead of the regular ID?
Instead of #MenuContainer, use this.
[itemid="MenuContainer"] { /*CSS STYLES*/ }
This will use data attribute (itemid) and the value (MenuContainer) from the HTML tag.
see this http://jsfiddle.net/442hdc0p/
You should not even try to do that.
Instead, use unique class for this element.
In your example you could add class="MenuContainer extraClass" and then in CSS use .extraClass { color: #FFF; } or whatever to define, what you need.