I want to change background-color in every second p element. But every p element is wraped up with another div class="positions" element. All 5 div class="positions" are included in one div class="bottom-section".
<div class="bottom-section">
<div class="positions position-1 hidden">
<p class="text-1"></p>
</div>
<div class="positions position-2 hidden">
<p class="text-2 even"></p>
</div>
I've tried to use like seudo class selector but i doesn't work
.positions p:nth-child(even) {
background-color: rgba(22, 22, 190, 0.8);
}
I believe this is what you are looking for.
.positions:nth-child(even) p {
background-color: rgba(22, 22, 190, 0.8);
}
<div class="bottom-section">
<div class="positions position-1 hidden">
<p class="text-1">text 1</p>
</div>
<div class="positions position-2 hidden">
<p class="text-2 even">text 2</p>
</div>
<div class="positions position-1 hidden">
<p class="text-3">text 3</p>
</div>
<div class="positions position-2 hidden">
<p class="text-4 even">text 4</p>
</div>
<div class="positions position-1 hidden">
<p class="text-5">text 5</p>
</div>
</div>
You can simply specify a number (2) for every "n" elements like so:
:nth-child(2n)
.positions:nth-child(2n) p {
background-color: rgba(22, 22, 190, 0.8);
}
Related
I have a container with multiple sibling div elements. These elements are interrupted by other div elements that are technically siblings yet are not like the others. They're not delimiters but that is a decent analogy. I want to keep the div-clusters between delimiters together on the line when a wrap happens. In the snippet below, there are five such clusters: ABC, DEFGH, IJKLM, and NO.
Is it possible to add an identifying class to each div in a cluster that belongs together, and then apply css to that class that would keep them together? I am hoping to avoid changing the structure.
#foo div{
text-align: center;
display: inline-block;
}
#foo p[contenteditable="true"] {
/* font-size: 22px;*/
height: 22px;
width: 22px;
color: black;
font-weight: bold;
/* border: 1px dotted black;*/
background-color: cyan;
}
#foo p.const {
background-color: inherit;
border: none;
height: 22px;
width: 22px;
}
<div id="foo">
<div class="group">
<p contenteditable="true" tabindex="0"></p>
<p>A</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="1"></p>
<p>B</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="2"></p>
<p>C</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div class="group">
<p contenteditable="true" tabindex="3"></p>
<p>D</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="4"></p>
<p>E</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="5"></p>
<p>F</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="6"></p>
<p>G</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="7"></p>
<p>H</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div>
<p class="const">"</p>
<p>"</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="8"></p>
<p>I</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="9"></p>
<p>J</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="10"></p>
<p>K</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="11"></p>
<p>L</p>
</div class="group">
<div>
<p contenteditable="true" tabindex="12"></p>
<p>M</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div>
<p class="const">"</p>
<p>"</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="13"></p>
<p>N</p>
</div>
<div class="group">
<p contenteditable="true" tabindex="14"></p>
<p>O</p>
</div>
</div>
Is it possible to hide the first pseudo element?
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
this html element has a pseudo styling like this:
.custom-condition::before {
content: '';
position: absolute;
width: 1px;
height: auto;
min-height: 25px;
border: 2px solid #f1f1f1;
top: -25px;
left: 50%;
margin-left: -2px;
}
It is not possible to do something like this?
.custom-condition:first-child::before {
content: '';
}
Also tried to added a span element to avoid the psuedo element like this:
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
Just copied the psuedo styling to the .smallLine
If all the elements are inside the same wrapper you can do this. Instead of removing the pseudo-element from the first simply define it for all the other but not the first.
.custom-condition ~ .custom-condition::before {
content: '[Before]';
}
<div>
<div> OR </div>
<div class="custom-condition"> AND </div>
<div class="custom-condition"> AND </div>
<div> OR </div>
<div class="custom-condition"> AND </div>
</div>
UDPATE
You can consider the parent element with your current HTML structure
.rule-container ~ .rule-container .custom-condition::before {
content: '[Before]';
}
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
I want to change the color of header element h4 inside a div with class info when i hover on a card (class card).
I have tried the code below but it doesn't work.
.card:hover info h4 {
color: blue;
}
<div class="card">
<div>
<div class="a"></div>
</div>
<div class="footer"></div>
<div class="info">
<h4> hello </h4>
</div>
</div>
</div>
Could someone help me with this. Thanks.
You have incorrect syntax for info class
.card:hover .info h4 {
color: blue;
}
<div class="card">
<div>
<div class="a"></div>
</div>
<div class="footer"></div>
<div class="info">
<h4> hello </h4>
</div>
</div>
</div>
To change the color like this:
I don't seem to find how to do it anywhere.
If you want to apply the same color style to all of your cards you can do something like this:
.ui.card,
.ui.cards>.card {
background-color: #D9499A;
}
The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:
.ui.card>.content,
.ui.cards>.card>.content {
background-color: #D9499A;
}
.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
background-color: #D9499A;
}
Check this example Fiddle out:
HTML
<div class="ui card kristy">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 22 Friends
</a>
</div>
</div>
<div class="ui card matthew">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</div>
<div class="content">
<a class="header">Matthew</a>
<div class="meta">
<span class="date">Joined in 2015</span>
</div>
<div class="description">
Matthew is an in interior designer living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 47 Friends
</a>
</div>
</div>
<div class="ui card molly">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</div>
<div class="content">
<a class="header">Molly</a>
<div class="meta">
<span class="date">Joined in 2010</span>
</div>
<div class="description">
Molly is a personal assistant living in Paris.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 12 Friends
</a>
</div>
</div>
CSS
.ui.card {
display: inline-block;
margin: 10px;
}
.ui.card,
.ui.cards>.card {
background-color: #5C5D5F;
color: white;
}
.ui.card.matthew {
background-color: #2B4B64;
}
.ui.card.kristy {
background-color: #253E54;
}
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: white;
}
You can give an id for the object and then set the color with CSS, eg:
#header-blue{
background-color: #1A3E6E;
}
I've seen a couple of related questions on this site, but all of them seemed to be due to selector issues, but I don't think that is the issue here.
In my case, Google Chrome and Safari both tell me that the computed style for the a tags in question have text-decoration:none.
Selecting the a tags and setting text-decoration:none makes no difference because they already have text-decoration:none.
The page is styled from a few different stylesheets, including one from my blog theme, one from a namespaced import of Materialize framework and a lastly a user-defined stylesheet which I left empty (thus I haven't included CSS in this post).
Demo: http://codepen.io/prashcr/pen/RaBKGY
Here is the HTML:
<body class="site animated fade-in-down">
<div class="site-wrap center">
<div class="post p2 p-responsive wrap" role="main">
<div class="measure">
<div class="mcss">
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Kanban<i class="material-icons right">more_vert</i>
</span>
<p>This is a link</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title<i class="material-icons right">close</i>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m5">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">
Camper News<i class="material-icons right">more_vert</i>
</span>
<p>This is a link</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title<i class="material-icons right">close</i>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
It is not a text-decoration there. It's a background-image. Chrome dev tools shows this:
a {
color: #0076df;
background-image: linear-gradient(to top, transparent 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, transparent 17%);
text-shadow: white 1px 0px 0px, white -1px 0px 0px;
}
When I disablebackground-image property in dev tools, the blue line disappears.
Ok, probably this will help you
.mcss a:active, .mcss a:hover {background-image: none;}
.mcss a {color: #039be5;background-image: none;text-decoration: none;}
Add background-image: none; into .mcss a
.mcss a {
color: #039be5;
text-decoration: none;
background-image: none;
}