Does a tag like this count as empty when forexample doing this?
HTML
<p>
</br>
</p>
CSS
p:empty {display:none}
No. For
p:empty {display:none}
to apply the p must actually be empty.
<p></p>
is empty and will take the style.
<p>
</p>
is NOT empty and will not take the style.
In the code below the border is added for illustration purposes only.
p { border: 1px solid red; }
p:empty { display:none }
<p></p>
<p>
</p>
No it doesn't. The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
<div></div>
<div><br/></div>
and
div {
width: 100px;
height: 100px;
border: 2px solid red;
}
div:empty {
border: 2px solid blue;
}
So here you will see only first div having border blue and second having border red.
Fiddle
Related
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 /*/}
Nothing in my code overwrites this selector, so I'm confused as to why it's not working. I've googled about it and asked a few friends and they don't know. I checked the server wasn't just taking a while to update the page by updating text and it seems fine.
CSS
mark {
color: #CCC;
background: #333;
padding: 5px;
margin: 5px;
}
mark:nth-child(even) {
background: #000;
}
HTML
<p><mark>warri0r</mark>Yes</p>
<p><mark>j3w1sh</mark>No</p>
<p><mark>MrGuy</mark>I don't know</p>
<p><mark>explode_</mark>Maybe...</p>
<p><mark>USAUSAUSA</mark>Why not?</p>
<p><mark>Samuel01</mark>Absolutely</p>
mark:nth-child(even) doesn't work because it is an only child of <p>.
Rewrite your CSS:
p:nth-child(even) mark {
background: #000;
}
(select <mark> of even <p>)
http://jsfiddle.net/hbxk3owh/
Because :nth-child looks for the parent element to find the child.
To easily understand it:
Wrap your code inside a div. Access the even paragraph using nth-child(2n) which is even children of the parent div mark.
You need not have parent div mask for your case because <body> is the parent. Just for explanation purpose I have added the class mask
mark {
color: #CCC;
background: #333;
padding: 5px;
margin: 5px;
}
.mark p:nth-child(even) mark {
background: #000;
}
<div class="mark">
<p>
<mark>warri0r</mark>Yes</p>
<p>
<mark>j3w1sh</mark>No</p>
<p>
<mark>MrGuy</mark>I don't know</p>
<p>
<mark>explode_</mark>Maybe...</p>
<p>
<mark>USAUSAUSA</mark>Why not?</p>
<p>
<mark>Samuel01</mark>Absolutely</p>
</div>
Because nth-child use in a element like this:
mark {
color: #CCC;
background: #333;
padding: 5px;
margin: 5px;
}
mark:nth-child(even) {
background: #000;
}
<p>
<mark>warri0r</mark><span>Yes</span> <br>
<mark>j3w1sh</mark><span<No</span> <br>
<mark>MrGuy</mark><span>I don't know</span>
</p>
Now p element has 3 child in yourself.
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}
I need to implement a menucard in to a website. My customer wants, that it looks exactly like on the card in the restaurant.
Is it with HTML possible to put a border-line directly under the text like on the image below ("Hauptgerichte")? And if yes, how could I realize that?
Thanks!
If you want the border to touch the text, you can adjust the line-height to something small:
p
{
border-bottom: 1px solid black;
line-height: 10px;
}
http://jsfiddle.net/kz43g/
Here is 1 variant - here is a fiddle.
html:
<div>
<p> some text </p>
</div>
css:
*{
padding:0;
margin:0;
}
div{
border-bottom:1px solid #000;
}
p{
margin-bottom:-5px;
}
i just put negative bottom margin to the text container (in this case the p tag)
This is possible in HTML / CSS: Example
HTML:
<h3 class="yourClass">Text place</h3>
CSS :
.yourClass{
width:300px;
border-bottom: 1px solid #000;
text-indent:50px;
line-height:80%;
}
In this example I'm changing the line height to move the text under the line and the then using text-indent to move it to the correct positioning. It should give you the desired results. There are a few ways to do this, but this will require less HTML.
Here is a JS Bin that shows how this could be done. I added a border to the bottom of the paragraph and a little padding to the left. Then I changed the line height of the paragraph so it would sit right on the border.
You could try working with:
text-decoration: underline;
I choose to use the border property for easy customization.
CSS from JS Bin:
p {
border-bottom:1px solid #333;
line-height: 50%;
padding: 0 0 0 40px;
}
Pure CSS solution is possible with pseudoelement after, see fiddle. The distance from text is done by the bottom:3px:
.underline {
position:relative;
}
.underline::after {
content: '';
width: 100%;
position:absolute;
bottom: 3px;
left:0;
border-bottom: 1px solid black;
}
edit: the line-height solution looks better :)
Put the text inside of a div. Then, make the div a set width. Then, add a border to the div.
<div id="title">
<h2> Hauptgerichte </h2>
</div>
/*CSS*/
#title{
width: 50px;
border-bottom: 2px solid #000000;
}
Put the header in H tags, then target the H tag with CSS and apply border bottom.
HTML
<div id="content">
<h1>title</h1>
</div>
CSS
#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}