I am trying to use multiple styling statements for a single DIV block. I am not declaring the style statements in the style block at the head. Instead, i am trying to use styling for one particular DIV block like shown below. I am aware I can use ID's to give styling for individual blocks but am trying to do otherwise.
The output of the below code only applies the first style condition but doesn't give the indent.
<div style='float:left';style='text-indent:10px'>XXXXXX</div>
Use this syntax:
<div style='text-indent:10px; float:left;'>XXXXXX</div> //and so on
Related
How can you change the css of a specific div even if a bunch of parent divs do not have ids? You can do
#someid>div>div>div>div>div
and I tried that, but it changes all the applicable divs at that level, not the one I want only. say there is ten divs that parent one div i want, and i use css like that to change the color. But there is another one of the same generation ( a sibling is it called) that also gets affected. imortant: there are no ids until that tenth one
first of all if you didn't share your code it's hard to find any solution. But Still if you're facing issue with CSS you can try inline CSS which will help you to achieve your goal. Inline CSS Like-
<div style="width:50%; text-align:center; justify-content:center;">Hello Josh</div>
In the above code style is inline CSS.
This question already has answers here:
Is putting a div inside an anchor ever correct?
(16 answers)
Closed 8 years ago.
I'm making a website that utilizes spans with a background-image:(so basically a picture) with a span nested in that that will display text over the picture.
The text and picture spans are both links that would go to the same place. I want my users to be able to click anywhere on the text or picture to navigate away from the page.
Instead of using using two tags that will link to the same thing in the same line of code, I noticed that I can put two spans, both the picture and the text, inside of the same tag and Chrome allows it.. but I don't know how support is on this kind of thing in other browsers.
Here's an example of what I'm doing:
<a href="https://theartofmikeyjoyce.com/">
<span class="cell E4">
<span class="text">MIKEY<br/>
<p>IN THE CLUB II</p>DIGITAL COLLAGE
</span>
</span>
</a>
Now normally I'm aware that anchor tags shouldn't have inline elements so I set display:inline-block' on the span tags. I'm also using HTML5, and the documentation I found on this was vague at best. The code seems to work on all modern browsers I've tested, but is this really canon?
HTML and CSS are two separate things. HTML5 defines which elements may and may not be nested in which other elements, and while it also suggests how they should be displayed, how this display is implemented is specified by CSS.
Changing the CSS display mode of an element does not change where it may appear in an HTML document, since HTML doesn't know how an element is being displayed using CSS (if at all).
In HTML 4, the a element may only contain other inline elements. Note that HTML 4 has its own definition of "inline" and most if not all inline elements correspond to display: inline in CSS, but again, the two languages are separate.
In HTML5, the a element has a transparent content model, which means any element can appear as a child of the a element provided that element can appear as a child of the parent of the a element. So for example, while a section > a can have a div as a child, a p > a cannot, because a div may appear within a section, but never within a p.
These are rules given by the HTML standard, but as you can see they say nothing about whether an inline element can contain inline-block elements. You will find that information in the CSS standard instead.
In summary, inline-block elements are similar to block boxes, except that they are laid inline, just like regular inline elements. That's all there is to it. Assuming your a element is an inline element, browsers should have no problem rendering inline-blocks along the same line(s) as the a element (as its children, of course).
On the other hand, if your a element were to contain block-level elements (i.e. display: block), the behavior, while still pretty well-defined, becomes less predictable thanks to browsers like Chrome.
I think this is what you are looking for.
HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
Usually no, but if set to display: inline you should be fine.
Is there a way, in CSS, to select a div inside another that contains a specific child like this:
I know it can be done using jQuery, but i'm looking for a way to do it ONLY using CSS.
This is not possible with plain CSS
You can only make rules where the selectors are parents, whereas your anchor is not a parent of .content.clearfix
This can be done using jQuery however. Heres an example:
http://jsfiddle.net/Curt/b95TB/
TL; DR: I'm looking for a way to display a SPAN element that can achieve the desired behavior showed in the 1st and 3rd pictures below.
Interactive Code: http://jsfiddle.net/53GZe/1/
When selecting text from a block of text, the display needs to be inline, so that no breaks are generated.
Now when I try to select multiple elements with the same display: inline: I get this:
Because the display is set to inline, it doesn't know how wide to make the <span> (the element inserted around the selection to give the custom highlight effect)
So, for the other case, when I set display to table-cell, I get this behavior:
Which is wonderful, and kind of neat. Except for that it doesn't work with an inline block of text like in my first example:
(notice the breaks before and after the selection)
Could you use jQuery to search the children of the highlighted div. Then if there are any blocked elements or line breaks, set the display property to table-cell.
Or by setting a new CSS rule for the situation, maybe again, by using jQuery to check for the inner elements?
.situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }
In my HTML there are a lot of elements. Some div elements have an table as child element. I want to set some css properties to all div element, but differs between those with table and those without it.
My first approach:
The class property of those div-elements containing a table is set to something with 'table', so I can select them with attribute selectors as described here: http://www.w3.org/TR/selectors/#attribute-selectors
div[class*="Table"]
{
/* Set Properties for all div with 'table' inside class-attribute */
}
Unfortunately there seems to be no opposite attribute selectors.
So my first question is: Is that right or what can I do?
My next approach is, to check if one child is a table. With help of google I only find how to select e.g. first-child of an element, but not how to check, if it is a table or not.
So my question 2 and 3 is: How do I select those div elements, containing (or not containing) a table as child?
Edit: Usually the table would be first-child, but if possible I would like to check all child elements being a table or not
There is no way to target parent elements with CSS (2.1 or 3). The best you can do, is manually add a class to all of the div tags you want to target, or use JavaScript to write your selection criteria.
If you were to use JavaScript to do this, you could easily do so with jQuery, like this:
$('div > :first-child').not('table').parent().addClass('notables');
Working demo
Edit for comment: If you want to select a div that doesn't have any tables nested, you can use the following, with the jQuery :has() selector:
$('div:not(:has(table))').addClass('notables');
Working demo 2
Your approach of adding a class to <div>s that contain a table is the only way to do this with CSS.
There is the :not() selector if that helps with this approach. It’s unsupported by IE 8 and below and Opera 9 and below, but all other browsers support it.
You can get the same effect by setting styles for <div>s that don’t contain tables with the div selector, then overriding those styles for <div>s with the table class, but :not() might make it less verbose. Demo here: http://jsfiddle.net/LyLS5/