Is there a way to select multiple descended elements without writing the full path everytime?
For example, to select both a and b in the code below
<div id="wrapper">
Link
<b>Text</b>
</div>
I use
#wrapper a, #wrapper b {
font-size: 16px;
}
Is there anyway to select both a and b without having to write #wrapper on all the elements?
Short answer, nop.
Long answer. Since children elements will inherit what you set in their parent you can do this:
#wrapper {
font-size: 16px;
}
And, I think <b> is no longer used, but not deprecated:
Note: According to the HTML 5 specification, the <b> tag should be
used as a LAST resort when no other tag is more appropriate. The HTML
5 specification states that headings should be denoted with the <h1>
to <h6> tags, emphasized text should be denoted with the <em> tag,
important text should be denoted with the <strong> tag, and
marked/highlighted text should use the <mark> tag.
Related
I experimented with using the :only-child pseudo-class but unfortunately this does not seem to consider the text nodes:
<style type="text/css">
div span:only-child {
color: red;
}
</style>
<div>
Test
<span>This still becomes red :(</span>
</div>
<div>
<span>This becomes red, as it should!</span>
</div>
<div>
<span>This does not become red - great!</span>
<span>This does not become red - great!</span>
</div>
I am trying to find a way to detect when a specific element is completely alone within its container element in a situation where I am unable to introduce new classes.
Is there a way to achieve this with CSS?
Is there a way to achieve this with CSS?
Unfortunately, not.
Included in an old revision of the CSS Working Group "mistakes" list is missing the idea that..
No naked text mixing with elements. All raw text should have an addressable, stylable element wrapping it, created by CSS if necessary.
Current list
Text Nodes are not element and CSS can't select (or ignore) elements that don't exist.
So, it's probably best practice to always use a text element when incorporating text in a page...you never know when you might need to style it.
div:nth-child(2) span {
color: red;
}
https://jsfiddle.net/cmckay/8663aLcg/
Apologies for the beginner css question but it's rather difficult to find an answer for this.
I'm looking at the duckett book for html and css and it has a couple of selector syntax confusing to me.
table.one{}
input#web{}
I thought that the .x indicates that x is a class selector and similarly that #x indicates that x is an id selector but why did the author choose to put text before these? He didn't give an explanation as far as I can tell.
table.one matches all table elements which have class one.
input#web matches the input element which has id web.
This kind of selector is called "Type selector". You can read these resources:
CSS2.1 spec
Selectors Level 3
Selectors Level 4
MDN article
table.one{}
'[element type].[css class name]{}
input#web{}
'[element type]#[id attribute]{}
When an element type is specified, that means that definition will only work for that element type.
table.myCss{} for the Element, when class='myCss' then apply the css. Don't apply this CSS to <span class='myCss'> or any other element type.
Here is a link to the official specifications page for CSS3. http://www.w3.org/TR/css3-selectors/
Let me break it down:
table.one means, look for a tag with the name table, which also has the class one
input#web similarly means: look for an element with the name input and the id of web
In some cases, these selectors might not be necessary, especially on IDs, since they are supposed to be unique, as opposed to classes, which are reasuable. The usage of element names with classes, however, can help you make different elements look different than others, for example, if you want to center text and a div, you might only want to use one class for both, but since <div> elements are block level, they can't be center like text by default.
div.center {
margin-left: auto;
margin-right: auto;
}
p.center {
text-align: center;
}
<input class="x" ... >
<div class="x" ... ></div>
So now we have:
.x {} // To select both
input.x {} // To select just the input with class "x"
div.x {} // To select just the div with class "x"
This could be used to just make it more clear for what element the styles are for. Or to limit the elements affected.
Similarly we can do this with element ids.
<input id="a" ... >
<div id="b" ... ></div>
So we can write simply #a. Or we can write input#a. Currently these are equivalent.
With the div we would have either #b or div#b.
The use of table and input in front of their respective classes / IDs reference the type of element in the markup. For example:
table.one {
..
}
References a table with class "one" (in code: <table class="one">). This way, if the author has another element with class "one" (example: <div class="one">), the div is not affected by the rule of table.one.
Same idea for input#web, except the selector is targeted towards input tags with ID of "web" (<input id="web">)
Some additional reading from W3 may be of some help (it's from CSS2, but the main points are still present): http://www.w3.org/TR/CSS2/selector.html
DEMO: http://jsfiddle.net/uWkYL/
I need to change read more link to be displayed at the end of the paragraph.
I need it to be like the green paragraph. Today it is like the red paragraph.
Website: http://sindreolsson.tumblr.com - Check last post where I use read more.
CSS:
.tumblr-text .rmlink { display: inline; }
HTML
{block:Text}
<!-- TEXT -->
<div class="tumblr-text">
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="copy">{Body}
{block:More}<div class='rmlink'>Continue reading..</div>{/block:More}</div>
</div><!-- /.tumblr-text -->
{/block:Text}
In my case, I also had to disable the <br> tags in order to make it work, kind of like this:
.copy br {
display: none;
}
If you have a parent container with a fixed width, set the child elements to have display: inline to have them collapse like in-line text
.copy * {
display: inline;
}
Of course, this will break the natural formatting of all previous <p></p> if you have more than one paragraph (which you don't want happening), so to preserve the original formatting, you only need to set the last element (specifically <p> elements) before the Read More break to have display: inline,
i.e. the second-last child element if your Read More <div> is the last child.
But actually by the looks of it, tumblr likes to generate a set of empty <p></p> tags after the final element of the {body} text, so you'll need to account for the offset.
.copy > p:nth-last-of-type(-n+2) {
display: inline;
}
This selects the immediate descedent > paragraph element p that is the last to second-last (-n+2) child of the type :nth-last-of-type.
To clarify, -n+2 in this scenario simply means select the last element, as well as the second-to-last element since you need to set the empty <p></p> that tumblr generates to display: inline as well as your actual last paragraph with content.
And then you can up the aesthetics with ellipsis if you want using additional CSS with the ::after selector and content: set to the unicode escape for ellipsis (u2026).
.copy > p:nth-last-of-type(2)::after {
content: "\2026";
}
EDIT :
Forgot to mention that this code alone will effect all posts that have <p></p>regardless of whether they contain the Read More break, and to only target those specific posts you need to modify the CSS to only apply to posts that have Read More links. One way to differentiate posts is to assign to the post a class name (e.g., readmore) wrapped around {block:More}{/block:More} block tags which only render on posts with Read More links.
CSS
.copy.readmore > p:nth-last-of-type(-n+2) {
display: inline;
}
HTML
<div class="copy{block:More} readmore{/block:More}">
...
</div>
Also, since Read More breaks are not rendered on the permalink page of the post, the CSS won't be applied there, and it will only be applied on index pages (your blog's main page) where the break occurs.
:nth-last-of-type
::after
… - \2026
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.
I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1.
<div class="tocolor tocolor-1"> tocolor 1 </div>
<div class="tocolor tocolor-2"> tocolor 2 </div>
<div class="tocolor tocolor-3"> tocolor 3 </div>
<div class="tocolor tocolor-4"> tocolor 4 </div>
.tocolor{
background: red;
}
Is there a way to have just 1 class tocolor-*. I tried using a wildcard * as in this css, but it didn't work.
.tocolor-*{
background: red;
}
What you need is called attribute selector. An example, using your html structure, is the following:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.
[class^="tocolor-"] — starts with "tocolor-".
[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.
Demo: http://jsfiddle.net/K3693/1/
More information on CSS attribute selectors, you can find here and here.
And from MDN Docs MDN Docs
Yes you can do this.
*[id^='term-']{
[css here]
}
This will select all ids that start with 'term-'.
As for the reason for not doing this, I see where it would be preferable to select this way; as for style, I wouldn't do it myself, but it's possible.
An alternative solution:
div[class|='tocolor'] will match for values of the "class" attribute that begin with "tocolor-", including "tocolor-1", "tocolor-2", etc.
Beware that this won't match
<div class="foo tocolor-">
Reference:
https://www.w3.org/TR/css3-selectors/#attribute-representation
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D)
If you don't need the unique identifier for further styling of the divs and are using HTML5 you could try and go with custom Data Attributes. Read on here or try a google search for HTML5 Custom Data Attributes