I'm doing some formatting on a webpage and I'm wondering if it's possible to save a chunk of html code as a class and reuse it.
For example:
I want to change this -
<div>
<hr>
<p>Item 1</p>
<a href="oh.jpg" />
<hr>
</div>
<div>
<hr>
<p>Apple</p>
<hr>
</div>
To this -
<div class="section">
<p>Item 1</p>
<a href="oh.jpg" />
</div>
<div class="section">
<p>Apple</p>
</div>
With the same end result of being contained within two horizontal rules.
Is there a way of making a class that isn't just for styling but contains HTML code as well?
The closest thing to what you're describing is the CSS pseudo-elements :before and :after. You can't insert HTML, but you can insert text or images, or a simple rectangle with content:"";display:block;. With some creativity you can pull off a lot of effects with just CSS.
So while you can't insert an actual <hr> with CSS, you can psuedo-elements to draw one with whatever styles you please:
.section:before {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
.section:after {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
If you absolutely need to add HTML, you can use Javascript to find all elements with class .section and append child elements.
you can use CSS
.section{
width : 100%;
border-bottom: 2px solid #ccc;
margin-top : 5px;
}
Related
In my Angular project, I have a div with 3 child elements which are a span, an i element (icon) and a span with innerHTML attribute. Normally, all texts should be in the same line, but innerHtml code always starts with p and I can do nothing about it, so this causes a problem. Any suggestions?
This is my output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
This is desired output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span>This is an example text. This is an example text.</span>
</div>
<p> is a block element and you covered it by span(inline). Add style="display: inline;" to <p> element. Browsers automatically add a single blank line before and after each <p> element.
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p style="display: inline;">This is an example text. This is an example text.</p></span>
</div>
It's not clear what you mean by "innerHtml code always starts with p and I can do nothing about it."
If you entered this markup yourself, you can just omit the p tag.
If you are getting this html from a CMS or database, and you can do nothing about the p tag that's in there, then:
Your question maybe should include the binding, not just the output.
You can let the p tag exist, but add CSS to make it do nothing. In the snippet below, I replaced your inline styles with a CSS class "myDiv", and put in a rule to render the p tag useless.
.myDiv {
border: 1px solid #DDD;
padding: 3px;
width: 50%;
margin: 0 auto;
}
.myDiv span p {
display: inline;
}
<div class="myDiv">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
For example, let's say my code looks like below.
Same from css all divs vs direct child divs but, need in SASS.
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.
There are two rules:
I can't add class attributes.
I have to write selectors that start with .Root.
Any Ideas?
It could be like this (SASS):
.Root
padding: 1em
color: green
> div:not(:nth-of-type(2))
border: 1px solid red
which compiles to:
.Root {
padding: 1em;
color: green;
}
.Root > div:not(:nth-of-type(2)) {
border: 1px solid red;
}
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
Also the last <div> should be </div>.
When I place a border on the right of the text the border is always at the very right of the page, not to the right of the text.
I've removed the default border properties of the browser and the result is still the same.
On the code pen the third result is what I want but with the border on the right.
Example: http://codepen.io/twig941/pen/zoqEXx
Code:
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
.logo {
border-right: 10px solid black;
}
.ideal-logo {
border-right: 5px solid black;
}
.ideal-left {
border-left: 5px solid black;
}
Use display: inline-block; on .logo & .ideal-logo. Currently they are block elements that is why they are flowing end-to-end.
Here is the snippet, have a look:
.logo {
display: inline-block;
border-right: 10px solid black;
}
.ideal-logo {
display: inline-block;
border-right: 5px solid black;
}
.ideal-left {
border-left: 5px solid black;
}
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
Hope this helps!
A <div> is a block, which by default spans the entire width of the page. Thus the right edge of each <div> is the right side of the screen, and the rest is empty space.
Using display: inline-block; will make the <div> shrink-wrap around its contents. (This will also allow it to sit on the same line with text and other elements, so you might need an extra wrapper if you still want an overall block.)
This happens because you are actually applying border on <div> and div is a block element you could try setting border to paragraph ` and it will work
html
<div class = "logo">
<p>The Three Words</p>
</div>
css
p
{
border:10px dashed #000;
}
What you could also do is set a width to div and set a border around it but that is quite in-
efficient
Use display: inline-block.
The pen
.logo {
border-right: 10px solid black;
display: inline-block
}
.ideal-logo {
border-right: 5px solid black;
display: inline-block;
}
.ideal-left {
border-left: 5px solid black;
}
<div class = "logo">
The Three Words
</div>
<br>
<br>
<br>
<br>
<div class = "ideal-logo">
The
<br>
Three
<br>
Words
</div>
<div class = "ideal-left">
The
<br>
Three
<br>
Words
</div>
I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!
I have CSS that changes formatting when you hover over an element.
.test:hover { border: 1px solid red; }
<div class="test">blah</div>
In some cases, I don't want to apply CSS on hover. One way would be to just remove the CSS class from the div using jQuery, but that would break other things since I am also using that class to format its child elements.
Is there a way to remove 'hover' css styling from an element?
One method to do this is to add:
pointer-events: none;
to the element, you want to disable hover on.
(Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
Browser Support ( 98.12% as of Jan 1, 2021 )
This seems to be much cleaner
/**
* This allows you to disable hover events for any elements
*/
.disabled {
pointer-events: none; /* <----------- */
opacity: 0.2;
}
.button {
border-radius: 30px;
padding: 10px 15px;
border: 2px solid #000;
color: #FFF;
background: #2D2D2D;
text-shadow: 1px 1px 0px #000;
cursor: pointer;
display: inline-block;
margin: 10px;
}
.button-red:hover {
background: red;
}
.button-green:hover {
background:green;
}
<div class="button button-red">I'm a red button hover over me</div>
<br />
<div class="button button-green">I'm a green button hover over me</div>
<br />
<div class="button button-red disabled">I'm a disabled red button</div>
<br />
<div class="button button-green disabled">I'm a disabled green button</div>
Use the :not pseudo-class to exclude the classes you don't want the hover to apply to:
FIDDLE
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>
.test:not(.nohover):hover {
border: 1px solid red;
}
This does what you want in one css rule!
I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.
Example:
.test { border: 0px; }
.testhover:hover { border: 1px solid red; }
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
add a new .css class:
#test.nohover:hover { border: 0 }
and
<div id="test" class="nohover">blah</div>
The more "specific" css rule wins, so this border:0 version will override the generic one specified elsewhere.
I also had this problem, my solution was to have an element above the element i dont want a hover effect on:
.no-hover {
position: relative;
opacity: 0.65 !important;
display: inline-block;
}
.no-hover::before {
content: '';
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 60;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">hover</button>
<span class="no-hover">
<button class="btn btn-primary ">no hover</button>
</span>
You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:
$(".test").hover(
if(some evaluation) {
$(this).css('border':0);
}
);