What is so annoying about CSS when you add style in the css class, it may apply other element/class by itself.
What the best way to prevent that?
For example:
HTML:
<div class='main-content'>
<p> Hello World </p>
<span> Test One </span>
<div class='column'>
<span> Test Two</span>
</div>
</div>
CSS:
.main-content span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
.column span {
font-size:20px;
text-transform:none;
display:inline-block;
}
I do not want "Test Two" <span> to have a background color.
Test: http://jsfiddle.net/szm9c/1/
Use a selector that actually selects the elements you want. In this case >, the child selector, will suffice.
.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
http://jsfiddle.net/mattball/mQFz2/
Use .main-content > span, that selects only directly descendent elements.
This has nothing to do with inheritance.
To use CSS properly, assign properties to elements using selectors that match only the elements that you wish to affect. (The example given is far too artificial for a useful analysis and for constructive suggestions on a better approach.)
You can use this
.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
If you use like .main-content > span that style will only affect to the immediate child spans of .main-content class
Just use all: initial at your root element.
.selector
{
all: initial;
}
Related
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.
How I can target first child of span after some html tag? My markup is is like this:
<div class="gad-help">
AdWords vodič<br><span>osigurajte najbolje rezultate</span>
</div>
And my CSS:
.gad-help span:nth-child(1) {
font-size: 12px;
text-align: center;
border: 2px solid red;
padding: 0px 10px;
}
But it won't select it when I use <br> tag in front of tag.
I think span:first-of-type or span:nth-of-type(1) are what you're looking for. But note that they both will select the first span child element of their parents. in this case the anchor tag, not the div element.
Therefore if you want to target the first anchor tag, you should do that by .glad-help > a:first-of-type instead (or :first-child in this case).
Demo
css
.gad-help a span:first-of-type {
font-size: 12px;
text-align: center;
border: 2px solid red;
padding: 0px 10px;
color:red;
}
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
I try to create styles with first-child and last-child items but I encountered a problem.
When I use first-child, because there is strong item just before, the style isn't apply. But my last-child work fine.
HTML:
<br />
<h2 class="title_block">Info <strong>1</strong>
<span class="title_block_info">+2</span>
<span class="title_block_info">+1</span>
</h2>
CSS:
h2 .title_block_info,
h2 strong {
border: 1px solid #000;
}
h2 .title_block_info:first-child {
border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-child {
border-radius: 0 10px 10px 0;
}
Example here : http://jsfiddle.net/mYKRW/
Anyone know why this came about?
Thanks,
It's because you have a "strong" tag as the first child, not the title_block_info class you were going for. first-child only works if it is in fact the first child of an element.
This works
<h2 class="title_block">
<span class="title_block_info">+2</span>
<span class="title_block_info">+1</span>
</h2>
http://jsfiddle.net/mYKRW/1/
If you need that strong text in there, you could try this, notice how I wrapped your two span tages in another span tag. This will allow you to use first-child and last-child
h2 .title_block_info,
h2 strong {
border: 1px solid #000;
}
h2 span .title_block_info:first-child {
border-radius: 10px 0 0 10px;
}
h2 span .title_block_info:last-child {
border-radius: 0 10px 10px 0;
}
<h2 class="title_block">
Info <strong>1</strong>
<span>
<span class="title_block_info">+2</span>
<span class="title_block_info">+1</span>
</span>
</h2>
http://jsfiddle.net/mYKRW/6/
Lastly you could use the first-of-type pseudo class if you want to keep your html exactly as you want, and just change your css.
h2 .title_block_info,
h2 strong {
border: 1px solid #000;
}
h2 .title_block_info:first-of-type {
border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-of-type {
border-radius: 0 10px 10px 0;
}
http://jsfiddle.net/mYKRW/9/
The :first-child pseudo-class selects the first matching element from the selector .title_block_info if it's also the :first-child of the parent element; as you note this doesn't work because there's another element that's the first-child of the parent element.
In your case you could either remove the strong element that's taking the :first-child position in the DOM, or you could use, instead, the :first-of-type pseudo-class:
h2 .title_block_info:first-of-type {
border-radius: 10px 0 0 10px;
}
JS Fiddle demo.
If your HTML is going to remain similarly predictable (the .title_block_info element will always follow the :first-child element) you could, instead:
h2 :first-child + .title_block_info {
border-radius: 10px 0 0 10px;
}
JS Fiddle demo.
References:
:first-of-type pseudo class.
:first-of-type compatibility.
I've got a span which goes over a number of lines and has a background colour. I need each of the lines to have a 10px padding at the end. The text will be dynamic so i need a css or js solution rather than just hacking it with nbsp tags (which is how I got the example pictured below)
The picture show the difference between what I have and what i want:
<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>
h3 {
margin:0;
font-size: 42px;}
h3 .heading {
background-color: #000;
color: #00a3d0;}
h3 .subhead {
background-color: #00a3d0;
color: #000;}
I can't think of any way to do this with css, I was considering using javascript to find the beginning and end of each line and adding a non-breaking space.
Does anyone have any ideas of how to achieve this?
Cheers
I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.
Live Demo
Screenshot from Chrome:
It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.
There are so many gotchas with this technique.
CSS:
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML:
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
box-shadow makes it easy!
box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
Here’s a solution that requires each word being wrapped in an additional SPAN element:
<h3><span class="heading"><span>THE</span> <span>NEXT</span> <span>GENERATION</span <span>OF</span> <span>CREATIVE</span> <span>TALENT</span></span><br/>
<span class="subhead"><span>IT'S</span> <span>RIGHT</span> <span>HERE</span></span></h3>
Then you can style the words individually like this:
h3 span {
display: inline-block;
}
h3 > span > span {
padding: 0 0.25em;
margin: 0 -0.25em 0 0;
}
h3 .heading span {
background-color: #000;
color: #00a3d0;
}
h3 .subhead span {
background-color: #00a3d0;
color: #000;
}
You could do something like this. Wrap it inside a <p> and set a border-left = to the padding left you'd like to set to the span. About right padding, I don't think there will be a solution without using JS. Btw, I'm still looking for other kinds of tricks
http://www.jsfiddle.net/steweb/cYZPK/
EDIT updated starting from your markup/css http://www.jsfiddle.net/steweb/cYZPK/1/
EDIT2 (using JS..mootools) http://www.jsfiddle.net/steweb/Nn9Px/ (just tested on firefox...need to be tested on the other browsers.. explanation asap :) )
why not just add padding-right:10px; to the container?
Even if is not 100% following your design concept, I think this is the only solution if you want to stick with CSS.
h3 span {
/* cross browser inline-block */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:0 10px;
}
The inline-block property will make your element expand based on it's content size, so it behaves like an inline element but also have the block property which lets you apply the padding.
Hope that helps
Here's a way to do it without the extra mark up - though it does require an image. http://codepen.io/DeptofJeffAyer/pen/FiyIb
I would highly recommend using Split Lines JS: https://github.com/jeremyharris/split_lines
The issue with tags is that it wraps "inline" meaning from start to finish. So if you have a fixed width and your span automatically goes onto a second line, that line of text will be wrapped with the first line and share the span. To get around this you need to span each line of text separately. For example:
<span>line one</span>
<span>line two</span>
This isn't an easy option if the text you wish to span separately is automatically generated from Wordpress or similar... To get around this use the JQuery script above.
~
Another way to get round it (although may not be ideal) is to simply add display:block; to you spans css class:
span { display: block; background-color: #333; color: #fff; }
This will span the entire block similar to a button.
Hope this helps.