In css how can I define multiple class' hover events to use the same properties.
This doesn't seem to work:
.my_div:hover .my_td:hover {
border: 1px solid red;
}
Thanks
You should separate with a comma, like this:
.my_div:hover, .my_td:hover {
border: 1px solid red;
}
.contact-dpd:hover .contact-content, .work-dpd:hover .work-content{
display:block
}
Add a comma in between: .my_div:hover, .my_td:hover.
This should work
.my_div:hover, .my_td:hover {
border: 1px solid red;
}
try
.my_div:hover, .my_td:hover {
border: 1px solid red;
}
Take look at CSS Selectors Level 4:
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.
:where(.a, .b):hover {
outline: 1px solid red;
}
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
It also works with selecting child elements:
:where(header, footer) p:hover {
outline: 1px solid red;
}
:where(main, aside) p:hover {
outline: 1px solid blue;
}
:where(header, footer) a {
color: red;
}
b, i {
color: green;
}
main :where(b, i) {
outline: 1px solid;
color: black;
}
<header>
<p>header link</p>
</header>
<main>
<p>main link <b>bold</b> <i>italic</i></p>
</main>
<aside>
<p>aside link <b>bold</b> <i>italic</i></p>
</aside>
<footer>
<p>footer link</p>
</footer>
You should separate CSS classes and events this way :
.my_div, .my_td {
&:hover {
border: 1px solid red;
}
}
Related
When a user clicks on an option to select it, a data-selected attribute is added to the .item. How do i style this state of the .item DIV and give it a border color.
I've tried this but doesnt seem to work
div[data-selected=".item"]{
border-color: #333;
}
Add style like this
div.item[data-selected] {
border: 2px solid #333;
}
div.item[data-selected] {
border: 2px solid #333;
}
<div class="item" data-selected="">
ABC
</div>
More Specifically if you want to select with the attribute value, you can do like the snippet below
This type of selection is called Attribute Selector
div.item[data-selected="value"] {
border: 1px solid #000;
}
<div class="item" data-selected="value">
Having Border
</div>
<div class="item">
Not Having Border
</div>
You can style it with following selector
div.item[data-selected] {
border: 1px solid rgba(0,0,0, 0.5);
}
Here is a fiddle for this
https://jsfiddle.net/3hp2v70r/
I have a blog where there's multiple images followed by a line as caption in the following manner:
<div class="content">
<p>Some Text above has <em>style</em> and so I can't use `em` style.</p>
<img class="alignnone" src="header.jpg">
<p><em>Photo Courtesy Of Donald Trump</em></p>
<p>Some Text</p><p>Some Text</p><p>Some Text</p>
</div>
I want to change the first <p> tag after the image and tried the following CSS but it didn't work.
img:first-child > p {
border-bottom: 1px solid #000;
}
Tried this too:
img > p:first-child em {
border-bottom: 1px solid #eee;
}
Tried this but that changes the first line or anywhere else where I have previously used <em> and so this method doesn't work either although I get what I want.
.content p > em {
border-bottom: 1px solid #eee;
}
How do I detect the <img> tag which is followed by <p><em>caption here</em></p>.
The CSS selector you're looking for here is +, the adjacent sibling combinator. For example:
img + p {
border-bottom: 1px solid #000;
}
You can try this css selector
.alignnone + p {
border-bottom: 1px solid #000;
}
Got it done with
.alignnone + p > em {
border-bottom: 1px solid #eee;
}
Will close this question.
Try this:
img:first-of-type + p { /*/Css rules /*/}
I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}
I want on hover on parent, child's child's TEXT ONLY turn red too. Is it possible ?
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
CSS
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}
http://jsfiddle.net/NHbn8/235/
Out of Context information
In real these are rows of a table and they will also on select keep there hover state (but it's out of context for now)
Use this on hover parent #row:hover > .col > .col-child{background:red;}
http://jsfiddle.net/33mhdju6/
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover #colChild{
background-color:red
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}
Try this
#row:hover #colChild {
color:red;
}
demo
check this
#colChild:hover{
background-color:red
}
I am not sure this will work, but I think it would:
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
Css:
#colChild:hover {
background-color:red;
}
DEMO
You can use css selectors property to apply the effects to any partiticular div. A list of the CSS selectors has been given in the link below..
http://www.w3schools.com/cssref/css_selectors.asp
I'm looking for a way to override a bootstrap accordian style.
.panel-group .panel-heading+.panel-collapse .panel-body {
border-top: 1px solid #ddd;
}
I am using an accordian inside a <div class="settings"><div>. I can therefore overide certain styles with the settings selector.
.settings .panel-heading {
padding: 0;
border: 0;
}
But when I use the settings selector with the grouped styles at the top it doesn't work...
.settings.panel-group .panel-heading+.panel-collapse .panel-body {
border-top: 1px solid #ddd;
}
This also doesn't work...
.settings.panel-group .settings.panel-heading+.settings.panel-collapse .settings.panel-
body {
border-top: 1px solid #ddd;
}
Please can someone point me in the right direction?
If your markup looks like this:
<div class="settings">
<div class="panel-group" id="accordion">
...
</div>
</div>
Then you need to have a space in your css selector between the .settings and .panel-group to indicate a descendant element.
.settings .panel-group ... { }
If you have .settings.panel-group without a space, it means the markup would have to be <div class="settings panel-group">.