I have successfully put a large first letter on the first paragraph on blog posts. But if there are other first paragraphs in the post (examples: the first paragraph of a blockquote, the first paragraph in an embedded podcast player) they are also displaying the large first letter.
I have tried some examples from this post but I'm not sure if this article is covering my situation or not. I'm new to the idea of adjacent sibling selectors. I'll share the code I tried to implement by (assumedly) telling any other p:first-of-type::first-letter incidents after my first incident to not have the styling...
.single .post .entry-content p:first-of-type::first-letter {
float: left;
width: 0.75em;
font-size: 600%;
font-family: alice, serif;
line-height: 78%;
}
.single .post .entry-content p:first-of-type::first-letter ~ p {
float: none;
width: 0;
font-size: 100%;
font-family: lora, serif;
line-height: 0%;
}
The large letters remain in block quotes and the embedded podcast player. How would I explain that first letters of first paragraphs inside of divs which are nested inside the .entry-content area should not have the first letter styling?
If your targeted paragraph is a direct child of .entry-content then you can use the direct children selector > :
.single .post .entry-content > p:first-of-type::first-letter {}
By using the direct children selector you don't select descendant elements that are nested deeper than direct children. And by adding :first-of-type or nth-of-type(n), you select only your paragraph within those childrens.
Related
I am trying to use tagged template literals along with styled components in VS code, like so:
const Component = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
`
VS code displays everything inside the tag as a string (so all the code inside is one color). I see lots of tutorials online that render the content inside the tags like normal code (where you have different colors for the various elements) but I cannot figure out how to do that. Can someone help?
It looks like you are looking for - vscode-styled-components
I am using React, styled-components, and media queries at the moment. I have 3 media queries at; 480px, 768px, 1200px - my text when scaling between these on a desktop does not hold the same structure.
I have an idea to use two styled components one for the first line of the title and one for the second and then make sure that each one has white-space: nowrap;. But, I am not sure that this is the best solution... Any suggestions?
Here is a visual example of what I am working with:
Here is the line breaking:
You can use the "non-breaking-space" HTML entity instead of the regular spaces at the positions that should not break / should form a unit or line
h1 {
width: 400px;
margin: 0 auto;
text-align: center;
font-size: 60px;
font-family: sans-serif;
}
<h1>The fastest way to finance NFTs</h1>
Your solution is good, however you can use two span elements within the h1 and give them a display:block; and white-space: nowrap;
<h1>
<span className="block whitespace-nowrap">The fastest way</span>
<span className="block whitespace-nowrap">to finance NFTs</span>
</h1>
So I currently have an ElementFinder which retrieves the following element:
<div class="label-div" style="width: 100%; height: 100%; font-family: Arial; margin-left: -43px; visibility: visible; font-size: 0.8em;" xmlns="http://www.w3.org/1999/xhtml">Helpdesk</div>
My question is how would I go about checking that the font-size equals a certain value?
This is close to the problem in question 2664045, however this is working with ElementFinders rather than Elements and none of the replies seemed to go over the option for this
I have tried element.getCssValue('font-size')).toBe('0.8em');, However this fails as it retrieves the font-size in pixels, rather than em
Try this:
element.getCssValue('font-size')).toBe('0.8em');
I ended up using the following solution, although not ideal, it works:
expect(hp.sunburstFirstChildTextElement.getAttribute('style')).toContain('font-size: 0.8em');
Try this is it returns Pixels
as convert em to pixel
element.getCssValue('font-size')).toBe(0.8*10+'px');
I'm making a site from scratch, and haven't gotten far before getting stuck-
It's very simple code, and nowhere do I specify margins or padding, yet when I view the page in Chrome and Firefox, there's this margin on the left side keeping anything from existing for the first 25 or so pixels. Something tells me this is normal/default, but is there any way I can completely center the page, surely it cannot be truly centered with this left:10px looking thing...
Here's the CSS:
.header {
height:100px;
width:100%;
top:100px;
z-index: 1;
position:fixed;
background-color:#767676;
top:0px;
}
html {
background-color:transparent;
color:#555555;
font-family: 'Roboto', 'Univers';
line-height: 1.0em;
width:100%;
height:100%;
background-color:#f8f8f8;
}
...And a screenshot showing exactly what I'm talking about:
http://i.stack.imgur.com/vFDID.png
You probably need a CSS reset of some sort to erase browser defaults. On my projects, I include * { padding: 0; margin: 0; } at the top of my CSS. This takes care of almost everything.
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.