I was finding out what the best method is for the next thing.
I want to give every section a border-bottom, but when there is a section that has followed up by a specific section it should not show the bottom border.
<section></section> <!-- has border-bottom -->
<section></section> <!-- THIS ONE SHOULD NOT HAVE A BORDER BOTTOM, BECAUSE UNDER THIS SECTION IS A SPECIFIC SECTION WITH A CLASS -->
<section class="highlight"></section> <!-- has border-bottom -->
<section></section> <!-- has border-bottom -->
Since there is no previous selector, you could fake a border-bottom by adding a border-top on the sections and simply not include one on both the section:first-of-type & .highlight class; also, add a bottom-border to the :last-of-type like so:
section { border-top: 3px solid #aaa; }
section:first-of-type, .highlight { border-top: none; }
section:last-of-type { border-bottom: 3px solid #aaa; }
.highlight { background: yellow; }
JSFiddle
Edit: Typos & basic clarification.
There won't be a CSS answer for you. Because there is no previous child selector in CSS until now which you can use and apply to remove the border from that element.
To check for the next element. You need to use JavaScript. CSS won't check for the elements next to the current element.
You can however use CSS to select a specific child using
section:nth-of-type(2) {
border: 0;
}
But remember, you cannot apply a condition in a CSS language. You need JavaScript for that.
Related
I have an accordion like control in which an item will be expanded and another will be collapsed. I have a common background color (which differs for various themes ) and a different hover color for all headers.
I need to maintain the background color for active item which is expanded and hover color need not to be applied for this item alone.
I have a class to identify this and I apply a certain background through hover selector
CSS
.e-active:hover {
background: #f00;
}
I tried with transparent and none but it changes the background to white
This is hard coded CSS but I need a generic CSS such that the existing background color will be maintained for active h3 element on hover state for any theme
You can use the :not css selector
div {
background: green;
padding: 2px 20px;
color: #ffffff;
}
h3 {
background: blue;
padding: 6px;
}
h3:not(.e-active):hover {
background: red;
}
<div>
<h3 class="e-active">Heading 1</h3>
<h3>Heading 2</h3>
<h3>Heading 3</h3>
</div>
You're probably going to need to include some form of JavaScript/jQuery to implement this dynamically (although I am certain you could use SASS/SCSS to achieve this dynamically as well).
The main focus of the script would be to check if the heading has the .e-active and not apply the .hover class in that instance. Once that's down, you can simply change :hover to .hover.
Here is an example - run the code snippet to see it work:
$('h1').mouseenter(function(){
if(!$(this).hasClass('e-active')) { //if heading does NOT have e-active class, apply hover effect
$(this).addClass('hover');
}
});
$('h1').mouseleave(function(){
$(this).removeClass('hover');
});
h1 {
background-color: salmon;
}
h1.hover {
background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Non active Heading 1</h1>
<h1 class="e-active">Active Heading 2</h1>
<h1>Non active Heading 3</h1>
EDIT:
Bhuwans answer that shows the use of the :not selector is a much cleaner way of achieving that - I would suggest using that route first whenever possible.
I have this css style definition:
[class*="col-"] {
border: 1px solid #dddddd;
}
The css style definition above make border for all bootstrap grid columns in my page.
But I need to set border for bootstrap grid columns in specific div with id = borderedArea.
Here is example
How can I change above style definition to make border on specific div with id =borderedArea
Try using this CSS3 selector. This will select all elements inside myDiv whose classname starts with col-.
#myDiv [class^="col-"] {
}
Please try the following :
#borderedArea [class*="col-"] {
border: 1px solid #dddddd;
}
I have a series of elements on my page followed by a breadcrumb . Generally, the message elements are empty and don't display, but in the rare case where one of them has content and is visible, I'd like a margin on the breadcrumb element them so it is not flush up against the message. However, I don't want to add a margin otherwise. Is there a way to do this purely with CSS? The + operator will add the margin, but it doesn't go away if the div is not displayed.
<div class="message success"></div>
<div class="message error"></div>
<div class="breadcrumb>some content</div>
.message + .breadcrumb {
margin-top: 10px; /*always there */
}
Strictly-speaking, no: CSS has no means to select an element according to its visibility. You state that the preceding element is usually empty, though, and you want to add a margin only if it has content. That being the case, then:
/* styles the .breadcrumb with a margin-top */
.message + .breadcrumb {
margin-top: 10px;
}
/* this rule is more specific, and so removes the margin-top if the .message
element is truly empty (of everything, including text-nodes and white-space) */
.message:empty + .breadcrumb {
margin-top: 0;
}
JS Fiddle demo.
The above will only work for the adjacent-siblings, if you're hoping to style the margin-top of .breadcrumb based on the existence of content in either, or both, of the .message elements, then that's a little trickier.
References:
:empty pseudo-class.
The rule have to be connected to "message error" element:
.error {
...
border-bottom: solid 1pt black;/*whatever you want*/
...
}
.error:empty {
border-bottom: none;
}
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".
This is what I am trying to do.
Link 1 | Link 2
Put it in an element, and style the element:
<span class="bar">|</span>
In your style sheet, for example:
.bar { font-size: 20px; }
You shouldn't be using the pipe (|) as a separator, use css instead.
Say the anchors were in a div, with id equal to breadcrumbs, like this:
<div id="breadcrumbs">
One
Two
Three
</div>
You could then add separators between them with a couple css rules, like this:
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}
You could vary the size, style and color of the separator with the border-right: 5px solid green rule. Here's an example(updated) in action. Here's some documentation on border styling.
The second rule with :last-child prevents an extra separator after the last element.
To vary the height of the separator, you would change the padding on the first rule.
By popular demand, a list version:
If you put the links in a list:
<ul id="breadcrumb-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
And use rules like this:
ul#breadcrumb-list li {
display: inline-block;
margin: 0;
padding: 1em 1em 0 1em;
border-right: 1px dotted blue;
}
ul#breadcrumb-list li:last-child {
border-right: none;
}
You can use a ul to markup your list of links for better semantics. You have to add the inline-block to put them on one line, li is by default a block level element.
I've also shown a different style you can achieve by varying the padding and border rules.
| is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use | to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.
You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span> tags whenever it occurs in the text you want to style it in.
You can also just use another unicode vertical-bar character which is more to your liking.
edit, In response to:
"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"
Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:
emulate-with-a-span technique - (live demo):
.linkSeparator {
display:inline-block;
margin-bottom:-1em; /*value should be (height-1em)/2*/
height:3em; width:0.25em;
background-color:grey;
margin-left:0.5em; margin-right:0.5em;
}
link1<span class="linkSeparator"></span>link2<span class="linkSeparator">...
images technique:
You could also use images (less elegant, won't go into detail).
sibling selector technique - (live demo):
You can also set the border-left on all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + F Matches any F element immediately preceded by a sibling element E." Therefore:
.separatedLinks a+a {
border-left: 2px solid black;
}
<??? class="separatedLinks">
link1
link2
link3
</???>
You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html