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">.
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/
Between each article, I have a horizontal separator:
.article {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
How to remove, with CSS, the useless horizontal line after the last child of #articles? (useless because there is no next article, so no separation needed)
With this CSS:
.article:last-child { border-bottom: none; }
DEMO: https://jsfiddle.net/lmgonzalves/r8pbLaas/
Use :last-child pseudo selector:
.article:last-child { border-bottom: none; }
Basically, what this selector does is ask the question "Am I the last direct child element of my parent?", and if so, applies the rules.
Note: :last-child, as well as :first-child, are often misinterpreted by CSS beginners. It does not mean "find my last child element".
.article { margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px solid #EEE; }
.article:last-child {
border-bottom: 0 none;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
Find more information on it here:
https://css-tricks.com/almanac/selectors/l/last-child/
Something like this
.article:not(:last-child) {
margin-bottom: 20px;
padding-bottom:20px;
border-bottom: 1px solid #EEE;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
OR
.article {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #EEE;
}
.article:last-child {
border-bottom:0;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
There are a few of other solutions to this problem that are worth a mention.
:first-child
You can use :first-child along with setting your border on the top of teach element - first child then removes the border on the first element and the visual output is the same.
As :first-child is in the css2 spec you can count on wider browser support than :last-child. This is an edge case for sure, but one that could conceivably be hit, especially considering the browsers in question are IEs.
It's also easier to compute in the browser than last child. The browser doesn't have to do anything to look at all the elements and work out the last, it can just stop at the first that matches. Worth considering if your front end is complex.
Adjacent selectors
Adjacent selector rules allow you to target an element only if it has another element of the specified type as a sibling. So:
p + p { border-top: 1px solid #888; }
will set a border top on a p tag only if it's preceded by a p tag.
Again this will cover edge case browsers that :last-child might not though I think it's cited as a performance concern, suffering somewhat similar issues to :last-child.
More info
A class
You can also just use a class on the last element. While this isn't necessary visually for this problem it's worth considering if you want to do more complex things with the last element, or if the containing HTML may change for some reason.
I prefer to use :first-child instead :last-child because IE7+ supports it (JSFiddle):
.article {
padding: 20px 0;
border-top: 1px solid #eee;
}
.article:first-child {
padding-top: 0;
border-top: 0;
}
<div id="articles">
<div class="article">Hello1</div>
<div class="article">Hello2</div>
<div class="article">Hello3</div>
<div class="article">Hello4</div>
</div>
See browsers support of :first-child vs :last-child.
.article:not(:last-child) {
border-bottom: 1px solid #eee;
}
Use .article:last-child { border-bottom: none; }
Each other .article element will have the defined style(/the border)!
I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hr tag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a after pseudoclass
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Here is how html5boilerplate does it:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
<hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
<div class="block_1 hline-bottom">Cheese</div>
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color.
This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
it is depends on requirement , but many developers suggestions is to make your code as simple as possible .
so, go with simple "hr" tag
and CSS code for that.
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html
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;
}
}
In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?