Can someone shed some light on this issue? The expected result does NOT appear to be happening... Am I correct in my assumptions?
.float-right{
float:right;
}
.header{
(stuff we don't care about)
}
.header img .float-right {
display:inline;
margin:0 0 0 0.5em;
}
I THOUGHT that would mean that a < img > tag inside a < div class="header" > would get:
float:right;
display:inline;
margin:0 0 0 0.5em;
IF the < img > tag was class="float-right"
Is this correct?
To get the result that you want, it should be
.header img.float-right
(no space)
No. .header img .float-right means any tag with the float-right class that is a descendant of an img tag which is in turn the descendant of a tag with the header class.
IF the < img > tag was class="float-right"
To acheive that there should be no space
.header img.float-right {
As it is now, it's looking for
[an element with class "float-right"] [inside an img] [inside an element with class header]
That's what will happen if you remove the space between img and .float-right in your stylesheet.
Related
As the title says I have a p element and I want to text-indent the start of every paragraph apart the the first paragraph where I don't want any text-indent. How can I do this in css?
You can give your first paragraph a class and then can do the following:
p:not(.first){
text-indent:30px
}
Please refer to this link:https://jsfiddle.net/n5pjgev6/400/
Another option which wouldn't require adding any additional markup or classes to your page:
http://codepen.io/panchroma/pen/jyaOJL
p{
text-indent:20px;
}
body p:first-child{
text-indent:0;
}
Good luck!
You can do this simply by applying a text-indent property to your paragraphs as so:
p {
text-indent: 50px;
}
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
Excerpt from CSS Tricks.
DEMO
p{
text-indent:40px
}
p:first-child{
text-indent:0;
}
CSS
p > span {
margin: 5px;
display: inline-block;
}
p > span:first-child {
text-indent: 25px;
}
JSFIDDLE
you can use this:
p:not(:first-child) {
text-indent:30px;
}
Trying to override row class's default left and right margins which are
.row .row {
margin-right: -15px;
margin-left: -15px;
}
Page has multiple rows like
HTML
<div class="row row-padded" id="question1"></div>
<div class="row row-padded" id="question2"></div>
<div class="row row-padded" id="question3"></div>
CSS
.row-padded {
margin-top:15px;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
}
It works fine if I overide it with id. This works fine for one row
#question1 {
margin-left:0px;
margin-right:0px;
}
but this does not
div[id^='question'] {
margin-left:0px;
margin-right:0px;
}
You need to understand how specificity works. The reason that div[id^='question'] doesn't override .row .row is because it only has one element and one attribute selector (considered the same specificity as a class) while the latter has two class selectors - classes override regular elements in specificity, so it makes sense that two classes combined has more priority than one class and one element. Also remember that an ID overrides both class and element selectors.
If you want the second selector to work, try:
div.row[id^='question'] {
margin-left: 0px;
margin-right: 0px;
}
<style>
.row{
margin-left: 0px;
margin-right: 0px;
}
</style>
Provide these codes in your page so that it will override default properties.
Try to mark the margin properties as important:
div[id^='question'] {
margin-left:0px !important;
margin-right:0px !important;
}
I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.
This is the HTML code:
<div class="pages-link">
1
2
3
....
</div>
This is the CSS code:
.pages-link {
margin:2em 0;
word-spacing:.25em;
}
.pages-link a {
background:#d7d7d7;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
color:#333;
padding:.3em .5em;
text-decoration:none;
}
This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.
What am I missing?
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
I think you're better of doing display:block; and float:left; because display:inline-block; is not supported in all browsers.
Say I have a <div> like this that is going to have all of the same properties with a background image or something like that:
div.someBaseDiv {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
And I wanted to inherit from it like this:
div.someBaseDiv someInheritedDiv {
background-image: url("images/worldsource/customBackground.gif");
background-repeat: no-repeat;
width: 950px;
height: 572px;
}
Of course I’m pretty sure this is written wrong, and I’m not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?
The easiest is to add your someInheritedDiv element to the first rule like this.
div.someBaseDiv,
#someInheritedDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:
#someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This is how specificity in CSS works.
Use both classes and combine them like so:
.baseClass
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
The markup is as follows:
<div class="baseClass otherClass"></div>
Now, in this fashion you can override baseClass if necessary... and since you don't have to keep adding your new class names to the baseClass definition, it's a bit cleaner.
For this task, I would recommend you use a powerful extension of CSS called LESS. It compiles into CSS or can be used on-the-fly with a javascript file as the link explains.
LESS supports inheritance (almost) as you describe. The documentation has the details (see the section "Mixins").
For your example, the LESS code would be:
.someBaseDiv {
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
someInheritedDiv {
.someBaseDiv;
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
Note that it would have to be .someBaseDiv and not div.someBaseDiv
What you want to do is make some CSS apply to two different types of elements, but allow them to have some differences as well. You can do this using some simple HTML:
<div class="base">
<div class"inherited">
</div>
</div>
And CSS:
.base, .inherited{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.inherited{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This will add the shared properties to both types of div, but specific ones only to derived divs
That really depends on your markup. If your inherited element resides under a div with class someBasDiv, then all child elements of it will automatically inherit those properties.
If however, you want to inherit the someBaseDiv class in any place in your markup, you could just make the element which you want to inherit with, use both of those classes like this:
<div class="someBaseDiv someInheritedDiv">
and your css would be like this:
div.someBaseDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
div.someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
If you want all the inner DIVs with a specific class to inherit from the base class build the HTML markup like this:
<div class="parent">
<div class="child">X</div>
</div>
And the CSS
.parent { border: 2px solid red; color: white }
.parent .child { background: black }
If all DIVs must inherit change .child to div.
See this example on jsFiddle
The following code
// parent // all DIVs inside the parent
.someClass div { }
Means: A top element (any) with the class someClass will add the styles to all its children DIVs (recursively).
How can i override img css for particular image.
Let say ,
i have css in my website like
img{
border:2px solid #ECECEC;
padding:4px;
}
i have one img with in the website say <img id="example" src="../example.png"/>
Now , i don't want to apply img css to this particular image.
How can i do that?
Thank
use the id as a selector and change the css properties you want.
#example{
border:0;
padding: 0;
}
img#example {border:none !important; }
No border for image with example id
If for some reason you can't touch the markup, you could use an attribute selector.
img[src="../example.png"] {
border:0;
padding:0;
}
add a separate class to the image
Example
<img class="example" id="example" src="../example.png"/>
.example{
border:0 !important;
padding: 0 !important;
}
Try this example:
Give it an inline style, mine worked very simply