Is there a way to apply CSS to data- attributes? [duplicate] - html

This question already has answers here:
How do I target elements with an attribute that has any value in CSS?
(3 answers)
Closed 2 years ago.
I am trying to apply my custom css style to only one anchor link in the div block.
<div class="grid">
<div class="zoom">
<a href="" class="card" data-entity-type="layout" data-entity-id="3">
<a href="" class="card" data-entity-type="flex" data-entity-id="3">
<a href="" class="card" data-entity-type="slim" data-entity-id="3">
</div>
</div>
// This applies to all links,
<style>
div.grid>.zoom>a.card {width:100px !important;display:block}
</style>
But, I would like to apply above css to only data-entity-type="layout". How to implement ? I don't want to use first:child-nth because the data-entity-type="layout" will not always come first.

You can use attribute selectors. It looks like this:
a[data-entity-type="layout"] {
/* css here */
}
Attribute selectors can be generic or specific.
Also, check this post for more on attribute selectors: How do I target elements with an attribute that has any value in CSS?

Related

CSS Nth of Type not targetting [duplicate]

This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 3 years ago.
I'm trying to apply specific mobile styling to every second occurrence of the "marketplace_item_container" class shown with the structure below:
.exploreMiddleSection div:nth-of-type(2) {
margin-right: 0;
}
<div class="exploreMiddleSection">
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
<a href="">
<div class="marketplace_item_container">
<div></div>
</div>
</a>
</div>
I'm aware that I can't target specific classes with nth-of-type and only standard html elements so I've tried the above but it's not working.
How can I properly target every second occurrence of "marketplace_item_container" class?
Since the div is the only direct child of a, try this:
.exploreMiddleSection a:nth-of-type(2) .marketplace_item_container {margin-right:0;}
Your selector is not working because the div isn't a direct child of exploreMiddleSection.
.exploreMiddleSection a div:nth-of-type(2) {margin-right:0;}

Conditionally set style if sibling element exists in PURE CSS [duplicate]

This question already has answers here:
CSS: Select element only if a later sibling exists
(9 answers)
Closed 5 years ago.
I have the following structure, where second element may or may not appear.
<div class="wrapper">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I want to conditionally set styles on .firstElement ONLY if .secondElement exists.
Is there a way to do this with PURE CSS? With either sibling selectors/ parent selectors?
Thanks!
In general, no. CSS reads forwards/down the DOM - it won't read backwards/up. But with this markup, you could use :not(:last-child)
.firstElement:not(:last-child) {
color: red
}
<div class="wrapper">
<div class="firstElement">target this</div>
<div class="secondElement"></div>
</div>
<div class="wrapper">
<div class="firstElement">not this</div>
</div>

Display div only if another element has a class [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I want to display the toggle_embed class only if the a element has has-embed class. Is there any way I can solve this using CSS?
<div class="comment HAS_EMBEDDED">
<div class="toggle_embed">Embedded content</div>
<a class="has-embed">#name</a>
<a>Text</a>
</div>
NO. There's no previous selector in css. So, you can't do this just with css, you may use jQuery for this.
But if you want to use pure css solution then what about changing the markup like below?
<div class="comment HAS_EMBEDDED">
<a class="has-embed">#name</a>
<div class="toggle_embed">Embedded content</div>
<a>Text</a>
</div>
Then you can use css like this:
.toggle_embed{
display: none;
}
.has-embed + .toggle_embed{
display: block;
}
Note: Changing the markup, you may have to re-work for your layout.

How to not inherit CSS styles from parents? [duplicate]

This question already has answers here:
How do I prevent CSS inheritance?
(13 answers)
Closed 6 years ago.
I would like to include a big <div> inside the <div class="jumbotron"> as seen below, but it should not inherent the CSS styles from the parents.
<div class="container">
<div class="jumbotron">
HTML chunk here that should not inherent from parents
</div>
</div>
Here is the big html chunk that is rendered correctly and here when it have been included in the Bootstrap template, where the font sizes and more are messed up.
Question
Is it possible to include the html chunk with it inherent any CSS styles from the parents?
Some ways to work with or prevent CSS inheritance:
The most obvious way would be to remove the jumbotron css and write your own.
Secondly, you could try to change the CSS to be more specific. For example using advanced css selectors IE: .jumbotron > .childClass. Or stuff like + :not() :first-child :last-child (and others). Depends on your use case. See advanced selectors.
Or if you don't want to modify or change the CSS of the parent class. Then another option would be to override it with a higher parent. For example...
<div class="jumboTronParent">
<div class="container">
<div class="jumbotron">
<div class="myChildClass"></div>
</div>
</div>
</div>
.jumboTronParent .jumbotron > .myChildClass {
font-size:1em;
// applies font style to just first level children with this class
}
.jumboTronParent .jumbotron .myChildClass {
font-size:1em;
// applies font style to all children with class
}

CSS selector getting parent when you know the child [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I have the following HTML
<div id"mainDiv">
<ul id="cat1">
</ul>
</div>
<div id"mainDiv">
<ul id="cat2">
</ul>
</div>
I would like to select the "mainDiv" which has a child ul "cat1", in my CSS as I want to apply some styling on that div. But not the all maindiv's
Any ideas?
Your markup is invalid:
<div id"mainDiv">
should be
<div id="mainDiv">
Since duplicate ID's are invalid in HTML, your question is really invalid in this context.
You should either use a class OR rethink your structure.
Example for the first div:
<div class="mainDiv firstdiv">
and subsequent divs:
<div class="mainDiv">
CSS:
.firstdif{}
put your CSS in that.
No CSS selector for this currently, so you're going to have to resort to some JavaScript/jQuery:
$('#cat2').parent().css(/* add it here */);