Is it still possible to add the align attribute to a HTML element to align the element itself? So that it's not set via CSS but in the element tag itself, something like this:
<div align="center"></div>
Will this still center it, or will the attribute just be ignored?
As Mike W pointed out in the comments:
The align attribute is deprecated in HTML 4, and removed in HTML 5.
Don't use it: use CSS instead.
That being said, here are some ways to center it anyway, even though you say you have more elements with that class.
Give this specific element inline style:
<div class="main" style="margin: auto;">
Be more specific in your CSS. The element is probably a child of an element that does not have any other .main babies, so you can specify this element by using the parent element in CSS:
.parent-class > .main {margin: auto;} /* If the parent has a class */
#parent-id > .main {margin: auto;} /* If the parent has an ID. This one is prefered, to avoid misunderstandings */
If the above is not the case, and there are multiple instances of .main within a single parent, you can use the nth-child selector (or first-child or last-child). For instance, if the element you want to center is the third child within the parent element, use this code.
.main:nth-child(3) {margin: auto;}
why dont you use
<div class="main" style="margin:0 auto;">
Related
I have a simple media query that isn't working... here is my code:
In an external stylesheet:
#media screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:visible !important;}
}
Next, in the html of my PHP Header file I have two sets of Logo HTML, each in its own wrapper with one of the classes above:
<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div>
</div>
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div>
</div>
It doesn't work because the browser will always use inline css over css defined by "" over external styles.
Maybe you want to use Chrome DevTools (F12), they will make your life much easier
there is value of display is not correct, there is no such a thing as visible, it should be something from the list defined to the property, see http://www.w3schools.com/cssref/pr_class_display.asp for valid values.
Usually, if you hover your mouse over the yellow warning mark, it says what is wrong.
You are misusing the display property of css.
The display property specifies the type of box used for an HTML element.
There is no such thing as display: visible;.
Have a look in here
inline Default value. Displays an element as an inline element like span
block Displays an element as a block element like p
flex Displays an element as an block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a li element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a table element
table-caption Let the element behave like a caption element
table-column-group Let the element behave like a colgroup element
table-header-group Let the element behave like a thead element
table-footer-group Let the element behave like a tfoot element
table-row-group Let the element behave like a tbody element
table-cell Let the element behave like a td element
table-column Let the element behave like a col element
table-row Let the element behave like a tr element
none The element will not be displayed at all (has no effect on
layout)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.
Sample css:
#media only screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:block !important;}
}
SOLVED:
The problem was hiarchy of cascade rules. The external style sheet where the media query resided could not over-ride the display properties set internally in the HTML document. The solution was to move the internal css to the external style sheet, then show and hide the elements in the media query. Like so:
/****LOGO*******************/
/Fix for Mobile Phones/
/***************************/
.logo_1000{display:inline-block;}/ * Show the default * /
.logo_320{display:none;} / * Hide the Mobile * /
#media screen and (max-width: 768px) { / *now we're on mobile, swap the logos * /
.logo_1000{display:none !important;}
.logo_320{display:inline-block !important;}
}
I'd like to select a img child of #boardMostra but not direct child of a tag a.
I tried this :
#boardMostra img :not(a img:first-child){
...
}
But it doesn't work.
The only css way you could use is to set a property on #boardMostra img and neutralize it on #boardMostra a > img.
An example
<div>
<img src="#" alt="#">
<img src="#" alt="#">
</div>
div img { margin: 10px 20px; }
div a > img { margin: 0; }
Explanation
Why your example code doesn't work:
The :not(X) property in CSS is a negation pseudo class and accepts a
simple selector1 as an argument. Essentially, just another selector of
any kind.
:not matches an element that is not represented by the argument. The
passed argument may not contain additonal selectors or any
pseudo-element selectors.
Source: https://css-tricks.com/almanac/selectors/n/not/
Solution:
#boardMostra > img , #boardMostra :not(a) > img { ... }
The first part refers to <img>s that are direct descendants of #boardMostra.
The second part refers to all <img>s in #boardMostra that are direct descendants of anything but <a>
See an example:
https://jsfiddle.net/t4snrgz6/
Why I think this is better than the accepted answer
There are times when you don't want to manually write out the CSS for the alternative set. For example, I am using a plugin that has a bunch of CSS for <code> elements that are direct descendants of <pre> elements. I want to style <code> elements that are NOT direct descendants of <pre> without messing with the plugin's CSS. My solution allows me to do that, using :not(pre) > code
This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.
I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')